@charset "UTF-8";
/*------------------------------------------------------------
	デザイン幅
	PC : フレーム 1920 / コンテンツ 1400（左右260の余白）
	     1512px以上は 1rem=10px 固定・コンテンツ中央寄せ・背景のみ全幅
	SP : 375
------------------------------------------------------------*/
/*------------------------------------------------------------
	ブレイクポイント（896 / 897 の1点｜発注時の決めごと）
	SP : 〜896　 375幅をビューポートに比例
	PC : 897〜　1512幅を比例、1512以上は 1rem=10px 固定
------------------------------------------------------------*/
/* SPデザイン幅(375)未満：追加の個別調整用（html の rem は SP 帯全体で 375 スケール） */
/*------------------------------------------------------------
	flex
------------------------------------------------------------*/
/*------------------------------------------------------------
	コンテンツ幅（1512以上は中央寄せ・背景のみ全幅）
------------------------------------------------------------*/
/*------------------------------------------------------------
	フォント
	YuGothic                : 本文（システムフォント）
	Tsukushi A Round Gothic : 見出し → Zen Maru Gothic で代替
	Oswald / Abhaya Libre   : 数字・英字（Google Fonts）
	Antro Vectra            : 英字装飾見出し → 画像化して再現
------------------------------------------------------------*/
/*------------------------------------------------------------
	カラー
------------------------------------------------------------*/
/*------------------------------------------------------------
	点線・破線（Figmaの strokeDashes を再現）
	dot  : dashes[0,4] + round cap → 1pxの点を4px間隔
	dash : dashes[4,4]             → 4pxの線と4pxの空き
------------------------------------------------------------*/
/*------------------------------------------------------------
	端がフェードする帯（Figmaの横グラデーション実測値を再現）
------------------------------------------------------------*/
/*------------------------------------------------------------
	MV（メインビジュアル）専用スケール

	MVだけはFigmaのフレーム幅1920を前提に組まれており、
	6つの丸バッジ＋縦組みキャッチを実寸で並べると最低1630px必要。
	1512pxでは物理的に入り切らずバッジがキャッチに被るため、
	MVのオーバーレイ（リード／キャッチ／バッジ）はビューポート幅に比例させる。
	1920px以上でデザイン実寸に固定される（min/maxで頭打ち）。
------------------------------------------------------------*/
/*------------------------------------------------------------
	共通背景（mv〜concept を覆うグラデーション）
------------------------------------------------------------*/
#main {
  background: linear-gradient(90deg, #f7f9e2 0%, #ffffff 49.52%, #e7f6fb 100%) no-repeat top center;
  background-size: 100% 440rem;
}
@media all and (max-width: 896px) {
  #main {
    background-size: 100% 392.7rem;
  }
}

/*------------------------------------------------------------
	mv
------------------------------------------------------------*/
.mv {
  position: relative;
  padding: 16.8rem 0 8.1rem;
}
@media all and (max-width: 896px) {
  .mv {
    padding: 10.7rem 0 5rem;
  }
}

.mvVisual {
  position: relative;
}

.mvPhotos {
  display: flex;
  gap: 34.6rem;
  padding: 0 4rem;
}
@media all and (max-width: 896px) {
  .mvPhotos {
    gap: 13.1rem;
    padding: 0;
  }
}

.mvPhoto {
  flex: 1 1 0;
  height: 85rem;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .mvPhoto {
    height: 38.6rem;
  }
}
.mvPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media all and (max-width: 896px) {
  .mvPhoto.mvPhoto01 {
    border-radius: 0 2rem 2rem 0;
  }
}
@media all and (max-width: 896px) {
  .mvPhoto.mvPhoto02 {
    border-radius: 2rem 0 0 2rem;
  }
}

.mvLead {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(60rem, 31.25vw);
  height: min(6.8rem, 3.5416666667vw);
  background-image: linear-gradient(to right, rgba(234, 247, 252, 0) 0%, #eaf7fc 34.2%, #eaf7fc 74.5%, rgba(234, 247, 252, 0) 100%);
}
@media all and (max-width: 896px) {
  .mvLead {
    top: 1.7rem;
    width: 27.4rem;
    height: 3.8rem;
  }
}
.mvLead .in {
  font-size: min(2.4rem, 1.25vw);
  line-height: min(4.2rem, 2.1875vw);
  font-weight: 700;
  color: #686868;
}
@media all and (max-width: 896px) {
  .mvLead .in {
    font-size: 1.3rem;
    line-height: 2.24rem;
  }
}

.mvCatch {
  position: absolute;
  top: min(12rem, 6.25vw);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: min(3.4rem, 1.7708333333vw);
  width: min(21.2rem, 11.0416666667vw);
  height: min(61.6rem, 32.0833333333vw);
}
@media all and (max-width: 896px) {
  .mvCatch {
    top: 6.9rem;
    gap: 1.6rem;
    width: 10.1rem;
    height: 28.6rem;
  }
}
.mvCatch {
  /* 本文の間に入る2本の罫線 */
}
.mvCatch::before, .mvCatch::after {
  content: "";
  position: absolute;
  top: min(0.7rem, 0.3645833333vw);
  width: 0;
  height: min(60.4rem, 31.4583333333vw);
  border-left: min(0.2rem, 0.1041666667vw) solid #90cbe9;
}
@media all and (max-width: 896px) {
  .mvCatch::before, .mvCatch::after {
    top: 0.3rem;
    height: 28.2rem;
    border-left-width: 0.1rem;
  }
}
.mvCatch::before {
  left: min(6.5rem, 3.3854166667vw);
}
@media all and (max-width: 896px) {
  .mvCatch::before {
    left: 3.1rem;
  }
}
.mvCatch::after {
  left: min(14.9rem, 7.7604166667vw);
}
@media all and (max-width: 896px) {
  .mvCatch::after {
    left: 7.1rem;
  }
}
.mvCatch p {
  writing-mode: vertical-rl;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: min(4.8rem, 2.5vw);
  line-height: 1;
  letter-spacing: min(0.8rem, 0.4166666667vw);
  color: #686868;
}
@media all and (max-width: 896px) {
  .mvCatch p {
    font-size: 2.3rem;
    letter-spacing: 0.3rem;
  }
}
.mvCatch em {
  font-style: normal;
  color: #abc75c;
}
.mvCatch .c3 {
  color: #5ba9d1;
}

/* mv：6つの丸バッジ */
@media all and (min-width: 897px) {
  .mvPoint {
    position: absolute;
    top: min(77.4rem, 40.3125vw);
    left: 0;
    width: 100%;
    height: min(26.9rem, 14.0104166667vw);
  }
}
@media all and (max-width: 896px) {
  .mvPoint {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 1.75rem;
    padding: 0 2rem;
    margin-top: 2.1rem;
  }
}
.mvPoint li {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.1), 0 2.8rem 2.8rem rgba(0, 0, 0, 0.09), 0 6.2rem 3.7rem rgba(0, 0, 0, 0.05);
  text-align: center;
}
@media all and (min-width: 897px) {
  .mvPoint li {
    position: absolute;
    width: min(20rem, 10.4166666667vw);
    height: min(20rem, 10.4166666667vw);
  }
}
@media all and (max-width: 896px) {
  .mvPoint li {
    width: 10rem;
    height: 10rem;
    box-shadow: 0 0.4rem 0.76rem rgba(0, 0, 0, 0.1), 0 1.4rem 1.43rem rgba(0, 0, 0, 0.09), 0 3.2rem 1.88rem rgba(0, 0, 0, 0.05);
  }
}
.mvPoint .in {
  display: block;
}
.mvPoint .icon {
  display: block;
  margin: 0 auto;
}
.mvPoint .icon img {
  display: block;
  width: 100%;
}
.mvPoint .txt {
  display: block;
  color: #505050;
}
.mvPoint small {
  display: block;
  font-size: min(1.6rem, 0.8333333333vw);
  line-height: min(3.6rem, 1.875vw);
  font-weight: 500;
  letter-spacing: min(0.064rem, 0.0333333333vw);
}
@media all and (max-width: 896px) {
  .mvPoint small {
    font-size: 1rem;
    line-height: 1.833rem;
    letter-spacing: 0.04rem;
  }
}
.mvPoint strong {
  display: block;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: min(2.6rem, 1.3541666667vw);
  line-height: min(3.6rem, 1.875vw);
  letter-spacing: max(-0.104rem, -0.0541666667vw);
}
@media all and (max-width: 896px) {
  .mvPoint strong {
    font-size: 1.324rem;
    line-height: 1.833rem;
    letter-spacing: -0.053rem;
  }
}
.mvPoint strong small {
  display: inline;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: min(2rem, 1.0416666667vw);
  line-height: inherit;
}
@media all and (max-width: 896px) {
  .mvPoint strong small {
    font-size: 1.019rem;
  }
}
.mvPoint {
  /* 位置と内部余白はデザイン実測値で個別指定 */
}
@media all and (min-width: 897px) {
  .mvPoint .p01 {
    left: 7.396%;
    top: 0;
  }
  .mvPoint .p02 {
    left: 19.792%;
    top: min(6.9rem, 3.59375vw);
  }
  .mvPoint .p03 {
    left: 32.188%;
    top: 0;
  }
  .mvPoint .p04 {
    left: 57.083%;
    top: 0;
  }
  .mvPoint .p05 {
    left: 69.479%;
    top: min(6.9rem, 3.59375vw);
  }
  .mvPoint .p06 {
    left: 81.875%;
    top: 0;
  }
  .mvPoint .p01 .icon {
    width: min(3.2rem, 1.6666666667vw);
    margin-top: min(3.3rem, 1.71875vw);
  }
  .mvPoint .p01 .txt {
    margin-top: min(0.6rem, 0.3125vw);
  }
  .mvPoint .p02 .icon {
    width: min(4.7rem, 2.4479166667vw);
    margin-top: min(3.8rem, 1.9791666667vw);
  }
  .mvPoint .p02 .txt {
    margin-top: min(0.5rem, 0.2604166667vw);
  }
  .mvPoint .p03 .icon {
    width: min(4.4rem, 2.2916666667vw);
    margin-top: min(3.6rem, 1.875vw);
  }
  .mvPoint .p03 .txt {
    margin-top: min(1.1rem, 0.5729166667vw);
  }
  .mvPoint .p04 .icon {
    width: min(5rem, 2.6041666667vw);
    margin-top: min(3.5rem, 1.8229166667vw);
  }
  .mvPoint .p04 .txt {
    margin-top: min(0.6rem, 0.3125vw);
  }
  .mvPoint .p05 .icon {
    width: min(6.2rem, 3.2291666667vw);
    margin-top: min(3.2rem, 1.6666666667vw);
  }
  .mvPoint .p05 .txt {
    margin-top: min(1rem, 0.5208333333vw);
  }
  .mvPoint .p06 .icon {
    width: min(6.4rem, 3.3333333333vw);
    margin-top: min(2.8rem, 1.4583333333vw);
  }
  .mvPoint {
    /* p06は小見出し＋主文で行送りが変わるためデザイン実測で個別指定 */
  }
  .mvPoint .p06 .txt {
    margin-top: max(-0.4rem, -0.2083333333vw);
  }
  .mvPoint .p06 strong {
    line-height: min(3.6rem, 1.875vw);
    margin-top: max(-0.6rem, -0.3125vw);
  }
  .mvPoint .p03 strong,
  .mvPoint .p04 strong,
  .mvPoint .p05 strong {
    line-height: min(3.4rem, 1.7708333333vw);
  }
  .mvPoint .p02 strong {
    letter-spacing: max(-0.182rem, -0.0947916667vw);
  }
  .mvPoint .p03 strong {
    letter-spacing: max(-0.13rem, -0.0677083333vw);
  }
  .mvPoint .p04 strong {
    letter-spacing: 0;
  }
  .mvPoint .p05 strong {
    letter-spacing: max(-0.364rem, -0.1895833333vw);
  }
}
@media all and (max-width: 896px) {
  .mvPoint .p01 .icon {
    width: 1.6rem;
    margin-top: 1.7rem;
  }
  .mvPoint .p01 .txt {
    margin-top: 0.2rem;
  }
  .mvPoint .p02 .icon {
    width: 2.3rem;
    margin-top: 1.9rem;
  }
  .mvPoint .p02 .txt {
    margin-top: 0.3rem;
  }
  .mvPoint .p03 .icon {
    width: 2.2rem;
    margin-top: 1.8rem;
  }
  .mvPoint .p03 .txt {
    margin-top: 0.6rem;
  }
  .mvPoint .p04 .icon {
    width: 2.5rem;
    margin-top: 1.7rem;
  }
  .mvPoint .p04 .txt {
    margin-top: 0.3rem;
  }
  .mvPoint .p05 .icon {
    width: 3.1rem;
    margin-top: 1.6rem;
  }
  .mvPoint .p05 .txt {
    margin-top: 0.5rem;
  }
  .mvPoint .p06 .icon {
    width: 3.2rem;
    margin-top: 1.4rem;
  }
  .mvPoint .p06 .txt {
    margin-top: -0.1rem;
  }
  .mvPoint .p06 strong {
    margin-top: -0.333rem;
  }
  .mvPoint .p03 strong,
  .mvPoint .p04 strong,
  .mvPoint .p05 strong {
    line-height: 1.732rem;
  }
  .mvPoint .p02 strong {
    letter-spacing: -0.093rem;
  }
  .mvPoint .p03 strong {
    letter-spacing: -0.066rem;
  }
  .mvPoint .p04 strong {
    letter-spacing: 0;
  }
  .mvPoint .p05 strong {
    letter-spacing: -0.185rem;
  }
}

/* mv：お知らせ */
@media all and (min-width: 897px) {
  .mvNews {
    display: flex;
    width: 140rem;
    max-width: 100%;
    margin: 14rem auto 0;
    padding: 0 10rem 0 5rem;
  }
}
@media all and (max-width: 896px) {
  .mvNews {
    margin-top: 5rem;
    padding: 0 2rem;
  }
}

.mvNewsTtl {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-right: 5.9rem;
}
@media all and (max-width: 896px) {
  .mvNewsTtl {
    width: fit-content;
    margin-right: 0;
  }
}
.mvNewsTtl {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 4rem;
  line-height: 5.93rem;
  letter-spacing: 0.16rem;
  color: #686868;
}

.mvNewsList {
  flex: 1 1 auto;
  margin-top: 1.4rem;
}
@media all and (max-width: 896px) {
  .mvNewsList {
    margin-top: 1rem;
  }
}
.mvNewsList li + li {
  margin-top: 1.6rem;
}
@media all and (max-width: 896px) {
  .mvNewsList li + li {
    margin-top: 1rem;
  }
}
.mvNewsList a,
.mvNewsList button {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 3.4rem;
  border-bottom: 0.1rem solid rgba(104, 104, 104, 0.2);
}
@media all and (max-width: 896px) {
  .mvNewsList a,
  .mvNewsList button {
    display: block;
    position: relative;
    height: 6.2rem;
  }
}
.mvNewsList button {
  margin: 0;
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.mvNewsList time {
  flex: 0 0 12rem;
  padding-top: 0.2rem;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.37rem;
  color: #7fcdec;
}
@media all and (max-width: 896px) {
  .mvNewsList time {
    display: block;
    padding-top: 0;
    font-size: 1.4rem;
    line-height: 2.07rem;
  }
}
.mvNewsList .txt {
  flex: 1 1 auto;
  overflow: hidden;
  padding-top: 0.2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: #686868;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media all and (max-width: 896px) {
  .mvNewsList .txt {
    display: block;
    padding: 0.5rem 3.1rem 0 0;
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}
.mvNewsList .arrow {
  flex: 0 0 2.4rem;
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 0.4rem 0 auto;
  border-radius: 50%;
  background: #7fcdec;
}
@media all and (max-width: 896px) {
  .mvNewsList .arrow {
    position: absolute;
    right: 0;
    top: 2.6rem;
    width: 2rem;
    height: 2rem;
    margin: 0;
  }
}
.mvNewsList .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #fff;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .mvNewsList .arrow::after {
    left: 0.75rem;
    top: 0.65rem;
    border-left-width: 0.6rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
@media (hover: hover) {
  .mvNewsList a:hover .txt,
  .mvNewsList button:hover .txt {
    opacity: 0.7;
  }
}

/* トップ：リニューアルのお知らせ */
.newsPopup {
  width: min(72rem, 100vw - 3.2rem);
  max-height: calc(100vh - 4rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1.2rem;
  background: #fff;
  color: #2c3e50;
  box-shadow: 0 1.2rem 4rem rgba(30, 40, 50, 0.18);
}
.newsPopup::backdrop {
  background: rgba(40, 48, 56, 0.45);
}

.newsPopupInner {
  position: relative;
  padding: 3.6rem 4rem 4rem;
  text-align: left;
}
@media all and (max-width: 896px) {
  .newsPopupInner {
    padding: 4.8rem 2.4rem 3.2rem;
  }
}

.newsPopupTitle {
  margin: 0;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
  color: #686868;
}
@media all and (max-width: 896px) {
  .newsPopupTitle {
    font-size: 2rem;
  }
}

.newsPopupDate {
  margin-top: 1.4rem;
}
.newsPopupDate time {
  font-family: "YuGothic", "Yu Gothic", "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #8d949c;
}

.newsPopupLead {
  margin-top: 1.6rem;
  padding-top: 2rem;
  border-top: 0.1rem solid #e3e3e3;
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 400;
}
@media all and (max-width: 896px) {
  .newsPopupLead {
    font-size: 1.4rem;
  }
}
.newsPopupLead p + p {
  margin-top: 1.6rem;
}

.newsPopupClose {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 0.1rem solid #d0d0d0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
@media all and (max-width: 896px) {
  .newsPopupClose {
    top: 1.2rem;
    right: 1.2rem;
    width: 3.2rem;
    height: 3.2rem;
  }
}
.newsPopupClose::before, .newsPopupClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 0.1rem;
  background: #2c3e50;
}
.newsPopupClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.newsPopupClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (hover: hover) {
  .newsPopupClose:hover {
    border-color: #2c3e50;
  }
}

html.is-newsOpen,
body.is-newsOpen {
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-newsOpen {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/*------------------------------------------------------------
	contact
------------------------------------------------------------*/
.contact {
  position: relative;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .contact {
    padding: 15.1rem 0 15.8rem;
  }
}

.contactPhoto {
  position: absolute;
  overflow: hidden;
}
.contactPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contactPhoto.contactPhoto01 {
  top: 0;
  left: 4rem;
  width: 95.1rem;
  height: 97.6rem;
  border-radius: 2rem 0 0 2rem;
}
@media all and (max-width: 896px) {
  .contactPhoto.contactPhoto01 {
    top: 0;
    left: 0;
    width: 100%;
    height: 15.8rem;
    border-radius: 0;
  }
}
.contactPhoto.contactPhoto02 {
  top: 0;
  right: 4rem;
  width: 95.1rem;
  height: 97.6rem;
  border-radius: 0 2rem 2rem 0;
}
.contactPhoto.contactPhoto02 img {
  object-position: right center;
}
@media all and (max-width: 896px) {
  .contactPhoto.contactPhoto02 {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 15.8rem;
    border-radius: 0;
  }
}

.contactEn {
  position: absolute;
  top: -0.4rem;
  left: 34.3rem;
  z-index: 2;
  width: 33.5rem;
}
@media all and (max-width: 896px) {
  .contactEn {
    top: 13.8rem;
    left: 0;
    width: 14.3rem;
  }
}
.contactEn img {
  display: block;
  width: 100%;
}

.contactBody {
  position: relative;
  z-index: 1;
  width: 110rem;
  margin: 0 auto;
  padding: 8rem 0;
  background: #d7f1fb;
  text-align: center;
}
@media all and (min-width: 897px) {
  .contactBody {
    height: 97.6rem;
  }
}
@media all and (max-width: 896px) {
  .contactBody {
    width: 100%;
    height: 99.7rem;
    padding: 5rem 0;
  }
}

.contactSub {
  font-size: 2.8rem;
  line-height: 4.2rem;
  font-weight: 700;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .contactSub {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}

.contactTtl {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
@media all and (max-width: 896px) {
  .contactTtl {
    margin-top: 1rem;
  }
}
.contactTtl {
  /* 斜線は回転させるため、レイアウト高に影響しないよう絶対配置 */
  /* Figmaの斜線は先端が細くなるくさび形（stroke 6px→0） */
}
.contactTtl::before, .contactTtl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.9rem;
  height: 4.6rem;
  margin-top: -2.3rem;
  background: #505050;
}
@media all and (max-width: 896px) {
  .contactTtl::before, .contactTtl::after {
    width: 4.3rem;
    height: 6.2rem;
    margin-top: -3.1rem;
  }
}
.contactTtl::before {
  margin-left: -30.3rem;
  clip-path: polygon(0 0, 0.6rem 0, 100% 100%);
}
@media all and (max-width: 896px) {
  .contactTtl::before {
    margin-left: -14.15rem;
  }
}
.contactTtl::after {
  margin-left: 27.8rem;
  clip-path: polygon(100% 0, calc(100% - 0.6rem) 0, 0 100%);
}
@media all and (max-width: 896px) {
  .contactTtl::after {
    margin-left: 9.65rem;
  }
}
.contactTtl .in {
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.8rem;
  line-height: 5.7rem;
  letter-spacing: -0.228rem;
  color: #505050;
}
@media all and (max-width: 896px) {
  .contactTtl .in {
    font-size: 2.6rem;
    line-height: 3.2rem;
    letter-spacing: -0.078rem;
  }
}

.contactCheck {
  display: flex;
  justify-content: center;
  gap: 2.8rem;
  margin-top: 3rem;
}
@media all and (max-width: 896px) {
  .contactCheck {
    display: block;
    margin-top: 2.9rem;
    padding-left: 1.9rem;
    text-align: left;
  }
}
.contactCheck li {
  display: flex;
  align-items: center;
  padding: 0 0.6rem 0.8rem 0;
  background-image: linear-gradient(to right, #505050 0, #505050 0.4rem, transparent 0.4rem, transparent 0.8rem);
  background-repeat: repeat-x;
  background-size: 0.8rem 0.1rem;
  background-position: left bottom;
}
@media all and (max-width: 896px) {
  .contactCheck li {
    width: fit-content;
    padding-bottom: 0.8rem;
  }
  .contactCheck li + li {
    margin-top: 1.7rem;
  }
}
.contactCheck li::before {
  content: "";
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  margin-right: 0.9rem;
  background: url(../img/common/icon_check.webp) no-repeat center/contain;
}
.contactCheck .in {
  /* Figmaのテキストボックスはアイコンと同じ20px高で中央寄せのため lh=font-size に揃える */
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .contactCheck .in {
    font-size: 1.8rem;
    line-height: 1.8rem;
  }
}

.contactNote {
  margin-top: 1.88rem;
  font-size: 1.7rem;
  line-height: 2.55rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .contactNote {
    margin-top: 1.97rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

.contactBar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 89.9rem;
  height: 4.8rem;
  margin: 3.98rem auto 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 19.8%, #fff 80.2%, rgba(255, 255, 255, 0) 100%);
}
@media all and (max-width: 896px) {
  .contactBar {
    width: 33.5rem;
    height: 4.4rem;
    margin-top: 2.2rem;
  }
}
.contactBar .in {
  font-size: 2.2rem;
  line-height: 2.8rem;
  font-weight: 700;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .contactBar .in {
    font-size: 1.6rem;
  }
}

.contactReserve {
  position: relative;
}

/* タブ切り替え用ラジオ（CSSのみで切替。ラベルからフォーカス可能な状態は保つ） */
.reserveRadio {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1rem;
  height: 0.1rem;
  opacity: 0;
  pointer-events: none;
}

.contactTag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 2.4rem;
  width: 80.6rem;
  margin: 3rem auto 0;
}
@media all and (max-width: 896px) {
  .contactTag {
    gap: 1.8rem 0.7rem;
    width: 33.5rem;
    margin-top: 2.3rem;
  }
}
.contactTag li {
  width: 14.2rem;
}
@media all and (max-width: 896px) {
  .contactTag li {
    width: 10.7rem;
  }
}
.contactTag label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.5rem;
  border: 0.1rem solid #5ba9d1;
  border-radius: 1.75rem;
  font-size: 1.4rem;
  line-height: 2.1rem;
  font-weight: 700;
  color: #5ba9d1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
@media all and (max-width: 896px) {
  .contactTag label {
    height: 2.6rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media (hover: hover) {
  .contactTag label:hover {
    background: #5ba9d1;
    color: #fff;
  }
}

.contactCalendar {
  width: 90.4rem;
  margin: 3rem auto 0;
}
@media all and (max-width: 896px) {
  .contactCalendar {
    width: 33.5rem;
    margin-top: 2.8rem;
  }
}

.reserveContent {
  display: none;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .reserveContent {
    /* 縮小表示後の見た目の高さ */
    height: 17rem;
    border-radius: 1rem;
  }
}
.reserveContent iframe {
  display: block;
  width: 100%;
  /* 予約ウィジェットの実寸：PC(904幅)=188px。デザイン枠215pxに収まる */
  height: 21.5rem;
  border: 0;
}
@media all and (max-width: 896px) {
  .reserveContent iframe {
    /* 335px幅だとウィジェット内部のレイアウトが7日分に足りず右端が切れるため、
       370px幅で描画して 335/370＝0.90541 に縮小表示する */
    width: 110.448%;
    height: 18.8rem;
    transform: scale(0.90541);
    transform-origin: top left;
  }
}

/* 選択中のタブを塗り、対応するカレンダーを表示 */
#reserveTab1:checked ~ .contactTag li:nth-child(1) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab1:checked ~ .contactCalendar #reserveContent1 {
  display: block;
}

#reserveTab1:focus-visible ~ .contactTag li:nth-child(1) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab2:checked ~ .contactTag li:nth-child(2) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab2:checked ~ .contactCalendar #reserveContent2 {
  display: block;
}

#reserveTab2:focus-visible ~ .contactTag li:nth-child(2) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab3:checked ~ .contactTag li:nth-child(3) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab3:checked ~ .contactCalendar #reserveContent3 {
  display: block;
}

#reserveTab3:focus-visible ~ .contactTag li:nth-child(3) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab4:checked ~ .contactTag li:nth-child(4) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab4:checked ~ .contactCalendar #reserveContent4 {
  display: block;
}

#reserveTab4:focus-visible ~ .contactTag li:nth-child(4) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab5:checked ~ .contactTag li:nth-child(5) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab5:checked ~ .contactCalendar #reserveContent5 {
  display: block;
}

#reserveTab5:focus-visible ~ .contactTag li:nth-child(5) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab6:checked ~ .contactTag li:nth-child(6) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab6:checked ~ .contactCalendar #reserveContent6 {
  display: block;
}

#reserveTab6:focus-visible ~ .contactTag li:nth-child(6) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab7:checked ~ .contactTag li:nth-child(7) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab7:checked ~ .contactCalendar #reserveContent7 {
  display: block;
}

#reserveTab7:focus-visible ~ .contactTag li:nth-child(7) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab8:checked ~ .contactTag li:nth-child(8) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab8:checked ~ .contactCalendar #reserveContent8 {
  display: block;
}

#reserveTab8:focus-visible ~ .contactTag li:nth-child(8) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab9:checked ~ .contactTag li:nth-child(9) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab9:checked ~ .contactCalendar #reserveContent9 {
  display: block;
}

#reserveTab9:focus-visible ~ .contactTag li:nth-child(9) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab10:checked ~ .contactTag li:nth-child(10) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab10:checked ~ .contactCalendar #reserveContent10 {
  display: block;
}

#reserveTab10:focus-visible ~ .contactTag li:nth-child(10) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab11:checked ~ .contactTag li:nth-child(11) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab11:checked ~ .contactCalendar #reserveContent11 {
  display: block;
}

#reserveTab11:focus-visible ~ .contactTag li:nth-child(11) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

#reserveTab12:checked ~ .contactTag li:nth-child(12) label {
  background: #5ba9d1;
  color: #fff;
}

#reserveTab12:checked ~ .contactCalendar #reserveContent12 {
  display: block;
}

#reserveTab12:focus-visible ~ .contactTag li:nth-child(12) label {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

.contactBtn {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 3rem;
}
@media all and (max-width: 896px) {
  .contactBtn {
    display: block;
    /* カレンダー枠がデザイン実測より13px高い分をここで吸収し、
       ボタン位置と全体高さをデザインに合わせる */
    margin-top: 1rem;
  }
}
@media all and (max-width: 896px) {
  .contactBtn .comBtnReserve {
    margin-top: 1rem;
  }
  .contactBtn .comBtnTel a,
  .contactBtn .comBtnReserve a {
    margin: 0 auto;
  }
}

/*------------------------------------------------------------
	concept
------------------------------------------------------------*/
.concept {
  position: relative;
  overflow: hidden;
  height: 213.3rem;
}
@media all and (max-width: 896px) {
  .concept {
    height: 166.6rem;
  }
}

.conceptBg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 140rem;
  height: 100%;
  transform: translateX(-50%);
}
@media all and (max-width: 896px) {
  .conceptBg {
    width: 100%;
  }
}
.conceptBg span {
  position: absolute;
  top: 18.3rem;
  width: 73.1rem;
  height: 180rem;
  background: #fff;
  border-radius: 36.55rem 36.55rem 2rem 2rem;
}
@media all and (max-width: 896px) {
  .conceptBg span {
    top: 9.6rem;
    width: 17.5rem;
    height: 151rem;
    border-radius: 8.75rem 8.75rem 1rem 1rem;
  }
}
.conceptBg span:nth-child(1) {
  left: 0;
}
@media all and (max-width: 896px) {
  .conceptBg span:nth-child(1) {
    left: 2rem;
  }
}
.conceptBg span:nth-child(2) {
  left: 66.9rem;
}
@media all and (max-width: 896px) {
  .conceptBg span:nth-child(2) {
    left: 18rem;
  }
}

.conceptInner {
  position: relative;
  z-index: 1;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .conceptInner {
    width: 100%;
  }
}

.conceptLogo {
  position: absolute;
  top: 13.2rem;
  left: 65.5rem;
  width: 9rem;
}
@media all and (max-width: 896px) {
  .conceptLogo {
    top: 5.3rem;
    left: 16.8rem;
    width: 4rem;
  }
}
.conceptLogo img {
  display: block;
  width: 100%;
}

.conceptTtl {
  position: absolute;
  top: 22.1rem;
  left: 35.8rem;
  width: 68.4rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  .conceptTtl {
    top: 9.3rem;
    left: 4.1rem;
    width: 29.4rem;
  }
}
.conceptTtl .in {
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 7.2rem;
  letter-spacing: -0.144rem;
  color: #505050;
}
@media all and (max-width: 896px) {
  .conceptTtl .in {
    font-size: 2.2rem;
    line-height: 3.23rem;
    letter-spacing: -0.198rem;
  }
}
.conceptTtl em {
  font-style: normal;
  font-size: 6.4rem;
  letter-spacing: -0.192rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .conceptTtl em {
    font-size: 2.8rem;
    letter-spacing: -0.252rem;
  }
}

.conceptCircle {
  position: absolute;
  top: 9.9rem;
  left: 99.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.9rem;
  height: 19.9rem;
  border: 0.158rem solid rgba(104, 104, 104, 0.5);
  border-radius: 50%;
  text-align: center;
}
@media all and (max-width: 896px) {
  .conceptCircle {
    top: 2.4rem;
    left: 28.7rem;
    width: 7.6rem;
    height: 7.6rem;
    border-width: 0.06rem;
  }
}
.conceptCircle .in {
  font-family: "Oswald", sans-serif, "YuGothic", "Yu Gothic", "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  font-weight: 500;
  font-size: 2.53rem;
  line-height: 3.73rem;
  color: #505050;
}
@media all and (max-width: 896px) {
  .conceptCircle .in {
    font-size: 1rem;
    line-height: 1.42rem;
  }
}
.conceptCircle em {
  font-style: normal;
  font-size: 3.159rem;
  color: #a5d423;
}
@media all and (max-width: 896px) {
  .conceptCircle em {
    font-size: 1.196rem;
  }
}

.conceptEn {
  position: absolute;
  z-index: 2;
  top: 22.2rem;
  left: 98.3rem;
  width: 34.1rem;
}
@media all and (max-width: 896px) {
  .conceptEn {
    top: 12.6rem;
    left: 22.7rem;
    width: 14.5rem;
  }
}
.conceptEn img {
  display: block;
  width: 100%;
}

.conceptLead {
  position: absolute;
  top: 31.6rem;
  left: 34.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70.8rem;
  height: 5.1rem;
  border-radius: 2.55rem;
  background: #7fcdec;
}
@media all and (max-width: 896px) {
  .conceptLead {
    top: 13.6rem;
    left: 3.5rem;
    width: 31.8rem;
    height: 2.3rem;
    border-radius: 1.145rem;
  }
}
.conceptLead .in {
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3.26rem;
  letter-spacing: 0.022rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .conceptLead .in {
    font-size: 1rem;
    line-height: 1.48rem;
    letter-spacing: -0.02rem;
  }
}
.conceptLead em {
  font-style: normal;
  color: #f6f18b;
}

.conceptList .photo {
  position: absolute;
  width: 83.4rem;
  height: 42rem;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .conceptList .photo {
    width: 29.5rem;
    height: 15rem;
  }
}
.conceptList .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.conceptList {
  /* Figmaのテキストは leadingTrim: CAP_HEIGHT のため、
     ボックス上端＝1行目のキャップ高さ。CSSは行送りの半分が上に付くので
     その分（PC 1.02rem / SP .71rem）だけ top を上げて見た目を合わせる */
}
.conceptList .txt {
  position: absolute;
  width: 43rem;
}
@media all and (max-width: 896px) {
  .conceptList .txt {
    left: 4rem;
    width: 29.6rem;
  }
}
.conceptList .txt h3 {
  font-size: 3.2rem;
  line-height: 4.6rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .conceptList .txt h3 {
    font-size: 1.8rem;
    line-height: 2.8rem;
    text-align: center;
  }
}
.conceptList .txt h3 em {
  font-style: normal;
  color: #5ba9d1;
}
.conceptList .txt p {
  margin-top: 1.7rem;
  font-size: 1.8rem;
  line-height: 3.6rem;
  font-weight: 500;
  color: #505050;
  text-align: justify;
}
@media all and (max-width: 896px) {
  .conceptList .txt p {
    margin-top: 1.3rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
}
.conceptList .txt p + p {
  margin-top: 1rem;
}
.conceptList .badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.4rem;
  height: 20.4rem;
  border-radius: 50%;
  background: rgba(165, 212, 35, 0.96);
  text-align: center;
}
@media all and (max-width: 896px) {
  .conceptList .badge {
    width: 11rem;
    height: 11rem;
  }
}
.conceptList .badge .in {
  font-size: 2.2rem;
  line-height: 3.3rem;
  font-weight: 700;
  letter-spacing: 0.022rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .conceptList .badge .in {
    font-size: 1.4rem;
    line-height: 2.1rem;
    letter-spacing: 0.014rem;
  }
}
@media all and (min-width: 897px) {
  .conceptList .c01 .photo {
    top: 44.8rem;
    left: 63.2rem;
  }
  .conceptList .c01 .txt {
    top: 51.18rem;
    left: 15rem;
  }
  .conceptList .c01 .badge {
    top: 68.1rem;
    left: 121.1rem;
  }
  .conceptList .c02 .photo {
    top: 95.8rem;
    left: -5.9rem;
  }
  .conceptList .c02 .txt {
    top: 100.98rem;
    left: 82.7rem;
  }
  .conceptList .c02 .badge {
    top: 119.4rem;
    left: -2.5rem;
  }
  .conceptList {
    /* Figmaはこのブロックのみ字送り -0.04em */
  }
  .conceptList .c03 .txt p {
    letter-spacing: -0.04em;
  }
  .conceptList .c03 .photo {
    top: 146.8rem;
    left: 63.2rem;
  }
  .conceptList .c03 .txt {
    top: 151.78rem;
    left: 15rem;
  }
  .conceptList .c03 .badge {
    top: 171rem;
    left: 121.1rem;
  }
}
@media all and (max-width: 896px) {
  .conceptList .c01 .photo {
    top: 18.7rem;
    left: 4rem;
  }
  .conceptList .c01 .txt {
    top: 35.79rem;
  }
  .conceptList .c01 .badge {
    top: 24.3rem;
    left: 25.3rem;
  }
  .conceptList .c02 .photo {
    top: 62.3rem;
    left: 4.1rem;
  }
  .conceptList .c02 .txt {
    top: 79.39rem;
  }
  .conceptList .c02 .badge {
    top: 67.9rem;
    left: 1.2rem;
  }
  .conceptList {
    /* Figmaはこの2ブロックに約物半角（halt）が掛かっている */
  }
  .conceptList .c02 .txt p,
  .conceptList .c03 .txt p {
    font-feature-settings: "halt" 1;
  }
  .conceptList .c03 .photo {
    top: 109.1rem;
    left: 4.1rem;
  }
  .conceptList .c03 .txt {
    top: 126.19rem;
  }
  .conceptList .c03 .badge {
    top: 114.7rem;
    left: 25.3rem;
  }
}

/*------------------------------------------------------------
	clinicinfo
------------------------------------------------------------*/
.clinicinfo {
  position: relative;
  height: 59.5rem;
}
@media all and (max-width: 896px) {
  .clinicinfo {
    height: 77.2rem;
  }
}

.clinicInner {
  position: relative;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .clinicInner {
    width: 100%;
  }
}

.clinicLogo {
  position: absolute;
  top: 9.3rem;
  left: 0.1rem;
}
@media all and (max-width: 896px) {
  .clinicLogo {
    top: 5.1rem;
    left: 2.4rem;
  }
}
.clinicLogo a {
  display: flex;
  align-items: flex-start;
}
.clinicLogo .mark {
  flex: 0 0 7.3rem;
  width: 7.3rem;
  margin-top: 0.3rem;
}
@media all and (max-width: 896px) {
  .clinicLogo .mark {
    flex-basis: 3.7rem;
    width: 3.7rem;
    margin-top: 0.2rem;
  }
}
.clinicLogo .txt {
  display: block;
  margin-left: 0.9rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  color: #686868;
}
@media all and (max-width: 896px) {
  .clinicLogo .txt {
    margin-left: 0.5rem;
  }
}
.clinicLogo .sub {
  display: block;
  font-size: 2.724rem;
  line-height: 3.9rem;
  letter-spacing: -0.064rem;
}
@media all and (max-width: 896px) {
  .clinicLogo .sub {
    font-size: 1.4rem;
    line-height: 2.2rem;
    letter-spacing: -0.035rem;
  }
}
.clinicLogo .name {
  display: block;
  margin-top: 0.4rem;
  font-size: 4.767rem;
  line-height: 3.9rem;
  letter-spacing: -0.2rem;
}
@media all and (max-width: 896px) {
  .clinicLogo .name {
    margin-top: 0.2rem;
    font-size: 2.46rem;
    line-height: 2.2rem;
    letter-spacing: -0.102rem;
  }
}

.clinicAddress {
  position: absolute;
  top: 21.65rem;
  left: 0;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .clinicAddress {
    top: 11.6rem;
    left: 6.7rem;
    width: 24rem;
    font-size: 1.5rem;
    line-height: 2.25rem;
    text-align: center;
  }
}

.clinicTel {
  position: absolute;
  top: 25.2rem;
  left: 0;
}
@media all and (max-width: 896px) {
  .clinicTel {
    top: 17.7rem;
    left: 8.9rem;
  }
}
.clinicTel a {
  display: flex;
  align-items: flex-start;
}
.clinicTel .icon {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  margin-top: 1.3rem;
}
@media all and (max-width: 896px) {
  .clinicTel .icon {
    flex-basis: 1.8rem;
    width: 1.8rem;
    margin-top: 0.9rem;
  }
}
.clinicTel .icon img {
  display: block;
  width: 100%;
}
.clinicTel .num {
  margin-left: 1.3rem;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 4rem;
  line-height: 5.93rem;
  letter-spacing: 0.16rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .clinicTel .num {
    margin-left: 1.1rem;
    font-size: 3rem;
    line-height: 4.45rem;
    letter-spacing: 0.12rem;
  }
}

.clinicTable {
  position: absolute;
  top: 34.1rem;
  left: 0;
  width: 66rem;
  border: 0.1rem solid rgba(104, 104, 104, 0.5);
  border-radius: 2rem;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .clinicTable {
    top: 24.1rem;
    left: 1.9rem;
    width: 33.5rem;
    border-radius: 1rem;
  }
}
.clinicTable table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.clinicTable th,
.clinicTable td {
  height: 5.9rem;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  color: #505050;
  text-align: center;
  vertical-align: middle;
}
@media all and (max-width: 896px) {
  .clinicTable th,
  .clinicTable td {
    height: 3.9rem;
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}
.clinicTable tr:first-child th,
.clinicTable tr:first-child td {
  border-bottom: 0.1rem solid rgba(104, 104, 104, 0.3);
}
.clinicTable tr:first-child th + th {
  border-left: 0.1rem solid rgba(104, 104, 104, 0.3);
}
.clinicTable .ttl {
  width: 21.4rem;
  border-right: 0.1rem solid rgba(104, 104, 104, 0.3);
}
@media all and (max-width: 896px) {
  .clinicTable .ttl {
    width: 10.9rem;
  }
}
.clinicTable tr:first-child .ttl + th {
  border-left: 0;
}
.clinicTable .note {
  font-size: 2rem;
  line-height: 3rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .clinicTable .note {
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}

.clinicMap {
  position: absolute;
  top: 9.6rem;
  left: 74rem;
  width: 66rem;
  height: 36.5rem;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .clinicMap {
    top: 35.1rem;
    left: 1.9rem;
    width: 33.5rem;
    height: 33.5rem;
  }
}
.clinicMap img,
.clinicMap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.clinicMapLink {
  position: absolute;
  top: 47.1rem;
  left: 121.5rem;
  width: 18.5rem;
}
@media all and (max-width: 896px) {
  .clinicMapLink {
    top: 69.6rem;
    left: 17.1rem;
  }
}
.clinicMapLink a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .clinicMapLink a {
    font-size: 1.45rem;
  }
}
.clinicMapLink .arrow {
  position: relative;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 1rem;
  border-radius: 50%;
  background: #a5d423;
}
.clinicMapLink .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #fff;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media (hover: hover) {
  .clinicMapLink a:hover {
    opacity: 0.7;
  }
}

/*------------------------------------------------------------
	promise
------------------------------------------------------------*/
.promise {
  position: relative;
  overflow: hidden;
  height: 297.4rem;
  background: #f1fad7;
}
@media all and (max-width: 896px) {
  .promise {
    height: 367rem;
  }
}

.promiseInner {
  position: relative;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .promiseInner {
    width: 100%;
  }
}

@media all and (max-width: 896px) {
  .promiseDeco {
    display: none;
  }
}
.promiseDeco span {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
.promiseDeco .cloud {
  width: 52.8rem;
  height: 30.7rem;
  background-image: url(../img/index/deco_cloud.webp);
}
.promiseDeco .leaf {
  width: 42.4rem;
  height: 24.7rem;
  background-image: url(../img/index/deco_leaf.webp);
}
.promiseDeco .d1 {
  top: -0.1rem;
  left: 127.4rem;
}
.promiseDeco .d2 {
  top: 165.2rem;
  left: -49.5rem;
}
.promiseDeco .d3 {
  top: 45.2rem;
  left: -46.6rem;
}
.promiseDeco .d4 {
  top: 226.8rem;
  left: 111.1rem;
}
.promiseDeco .d5 {
  top: 250.2rem;
  left: -22.6rem;
}
.promiseDeco .d6 {
  top: 60.6rem;
  left: 120rem;
}
.promiseDeco .d7 {
  top: 9.9rem;
  left: -16.8rem;
}
.promiseDeco .d8 {
  top: 136.8rem;
  left: 144.8rem;
}

.promisePanel {
  position: absolute;
  top: 15.5rem;
  left: 0;
  width: 140rem;
  height: 268.6rem;
  background: #fff;
  border-radius: 70rem 70rem 2rem 2rem;
}
@media all and (max-width: 896px) {
  .promisePanel {
    top: 9.8rem;
    left: 2rem;
    width: 33.5rem;
    height: 342.1rem;
    border-radius: 16.75rem 16.75rem 2rem 2rem;
  }
}

.promiseHead .sub {
  position: absolute;
  top: 15.5rem;
  left: 53.2rem;
  font-size: 3.4rem;
  line-height: 5.1rem;
  font-weight: 500;
  color: #505050;
}
@media all and (max-width: 896px) {
  .promiseHead .sub {
    top: 5.2rem;
    left: 9.9rem;
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}
.promiseHead .ttl {
  position: absolute;
  top: 19.5rem;
  left: 52.2rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 7.4rem;
  line-height: 10.92rem;
  color: #505050;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .promiseHead .ttl {
    top: 7.3rem;
    left: 9.4rem;
    font-size: 4.5rem;
    line-height: 6.65rem;
    letter-spacing: -0.222rem;
  }
}
.promiseHead .ttl em {
  font-style: normal;
  font-size: inherit;
}
.promiseHead .ttl small {
  font-size: 5rem;
}
@media all and (max-width: 896px) {
  .promiseHead .ttl small {
    font-size: 3rem;
  }
}
.promiseHead .ttl .n5 {
  position: absolute;
  top: -9.6rem;
  left: -8.1rem;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 15.2rem;
  line-height: 22.53rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .promiseHead .ttl .n5 {
    top: -5.4rem;
    left: -5rem;
    font-size: 9.2rem;
    line-height: 13.63rem;
  }
}
.promiseHead .en {
  position: absolute;
  top: 12.9rem;
  left: 86.6rem;
  width: 35.2rem;
}
@media all and (max-width: 896px) {
  .promiseHead .en {
    top: 9.3rem;
    left: 22.5rem;
    width: 15rem;
  }
}
.promiseHead .en img {
  display: block;
  width: 100%;
}

.promiseFirst .photo {
  position: absolute;
  top: 38.7rem;
  left: 10rem;
  width: 56rem;
  height: 50.7rem;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .promiseFirst .photo {
    top: 16.4rem;
    left: 4rem;
    width: 29.5rem;
    height: 17rem;
    border-radius: 1rem;
  }
}
.promiseFirst .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promiseFirst .num {
  position: absolute;
  top: 36.4rem;
  left: 74rem;
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: 10rem;
  line-height: 11.8rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .promiseFirst .num {
    top: 28.9rem;
    left: 3.3rem;
    font-size: 6.6rem;
    line-height: 7.79rem;
  }
}
.promiseFirst .num::after {
  content: "";
  position: absolute;
  top: 3.7rem;
  left: 11.05rem;
  width: 0.1rem;
  height: 7.1rem;
  background: #5ba9d1;
  transform: rotate(35.3deg);
}
@media all and (max-width: 896px) {
  .promiseFirst .num::after {
    top: 2.5rem;
    left: 7.35rem;
    height: 4.75rem;
    transform: rotate(34.7deg);
  }
}
.promiseFirst h3 {
  position: absolute;
  top: 48.2rem;
  left: 74rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 5.1rem;
  letter-spacing: -0.34rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .promiseFirst h3 {
    top: 36.7rem;
    left: 4rem;
    font-size: 2.2rem;
    line-height: 3.3rem;
    letter-spacing: -0.22rem;
  }
}
.promiseFirst .lead {
  position: absolute;
  top: 60.6rem;
  left: 74rem;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .promiseFirst .lead {
    top: 44.8rem;
    left: 4rem;
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}

.promiseCheck {
  position: absolute;
  top: 69.3rem;
  left: 74rem;
}
@media all and (max-width: 896px) {
  .promiseCheck {
    top: 50.5rem;
    left: 4rem;
  }
}
.promiseCheck li {
  display: flex;
  align-items: center;
  width: fit-content;
  padding-bottom: 0.8rem;
  background-image: linear-gradient(to right, #505050 0, #505050 0.4rem, transparent 0.4rem, transparent 0.8rem);
  background-repeat: repeat-x;
  background-size: 0.8rem 0.1rem;
  background-position: left bottom;
}
@media all and (max-width: 896px) {
  .promiseCheck li {
    padding-bottom: 0.6rem;
  }
}
.promiseCheck li + li {
  margin-top: 2.5rem;
}
@media all and (max-width: 896px) {
  .promiseCheck li + li {
    margin-top: 1.5rem;
  }
}
.promiseCheck li::before {
  content: "";
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  margin-right: 0.9rem;
  background: url(../img/common/icon_check_green.webp) no-repeat center/contain;
}
@media all and (max-width: 896px) {
  .promiseCheck li::before {
    flex-basis: 1.3rem;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.6rem;
  }
}
.promiseCheck .in {
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .promiseCheck .in {
    font-size: 1.2rem;
    line-height: 1.3rem;
  }
}
.promiseCheck em {
  font-style: normal;
  color: #a5d423;
}

.promiseLead1,
.promiseLead2 {
  position: absolute;
  left: 0;
  width: 100%;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 4rem;
  letter-spacing: -0.1rem;
  color: #505050;
  text-align: center;
}
@media all and (max-width: 896px) {
  .promiseLead1,
  .promiseLead2 {
    font-size: 1.5rem;
    line-height: 2.6rem;
  }
}

.promiseLead1 {
  top: 96.4rem;
}
@media all and (max-width: 896px) {
  .promiseLead1 {
    top: 66.1rem;
    letter-spacing: -0.15rem;
  }
}

.promiseLead2 {
  top: 106.4rem;
}
@media all and (max-width: 896px) {
  .promiseLead2 {
    top: 78rem;
    letter-spacing: -0.075rem;
  }
}
.promiseLead2 em {
  font-style: normal;
  color: #5ba9d1;
}

.promiseTint span {
  position: absolute;
  width: 58.8rem;
  height: 55.9rem;
}
@media all and (max-width: 896px) {
  .promiseTint span {
    width: 23rem;
  }
}
.promiseTint span:nth-child(1) {
  top: 131.6rem;
  left: 0;
  background: rgba(203, 220, 224, 0.25);
  border-radius: 0 2rem 2rem 0;
}
@media all and (max-width: 896px) {
  .promiseTint span:nth-child(1) {
    top: 93.9rem;
    left: 2rem;
    height: 53rem;
    border-radius: 0 1rem 1rem 0;
  }
}
.promiseTint span:nth-child(2) {
  top: 131.6rem;
  left: 81.2rem;
  background: rgba(217, 224, 203, 0.25);
  border-radius: 2rem 0 0 2rem;
}
@media all and (max-width: 896px) {
  .promiseTint span:nth-child(2) {
    top: 153.5rem;
    left: 12.5rem;
    height: 59.8rem;
    border-radius: 1rem 0 0 1rem;
  }
}
.promiseTint span:nth-child(3) {
  top: 206rem;
  left: 0;
  background: rgba(217, 224, 203, 0.25);
  border-radius: 0 2rem 2rem 0;
}
@media all and (max-width: 896px) {
  .promiseTint span:nth-child(3) {
    top: 218.8rem;
    left: 2rem;
    height: 63.7rem;
    background: rgba(203, 220, 224, 0.25);
    border-radius: 0 1rem 1rem 0;
  }
}
.promiseTint span:nth-child(4) {
  top: 206rem;
  left: 81.2rem;
  background: rgba(203, 220, 224, 0.25);
  border-radius: 2rem 0 0 2rem;
}
@media all and (max-width: 896px) {
  .promiseTint span:nth-child(4) {
    top: 289.1rem;
    left: 12.5rem;
    height: 59.8rem;
    background: rgba(217, 224, 203, 0.25);
    border-radius: 1rem 0 0 1rem;
  }
}

.promiseList .photo {
  position: absolute;
  width: 56rem;
  height: 26rem;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .promiseList .photo {
    left: 4rem;
    width: 29.5rem;
    height: 17rem;
    border-radius: 1rem;
  }
}
.promiseList .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promiseList .num {
  position: absolute;
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: 10rem;
  line-height: 11.8rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .promiseList .num {
    left: 3.3rem;
    font-size: 6.6rem;
    line-height: 7.79rem;
  }
}
.promiseList .num::after {
  content: "";
  position: absolute;
  top: 4rem;
  left: 11.05rem;
  width: 0.1rem;
  height: 7.1rem;
  background: #5ba9d1;
  transform: rotate(35.3deg);
}
@media all and (max-width: 896px) {
  .promiseList .num::after {
    top: 2.5rem;
    left: 7.35rem;
    height: 4.75rem;
    transform: rotate(34.7deg);
  }
}
.promiseList h3 {
  position: absolute;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 4.2rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .promiseList h3 {
    left: 4rem;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}
.promiseList .bodyWrap {
  position: absolute;
  width: 56rem;
}
@media all and (max-width: 896px) {
  .promiseList .bodyWrap {
    left: 4rem;
    width: 29.5rem;
  }
}
.promiseList .body {
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: #505050;
}
@media all and (max-width: 896px) {
  .promiseList .body {
    font-size: 1.4rem;
    /* FigmaはSPの本文に約物半角（halt）が掛かっている */
    font-feature-settings: "halt" 1;
  }
}
.promiseList .body + .body {
  margin-top: 1rem;
}
@media all and (min-width: 897px) {
  .promiseList .p02 .num {
    top: 119rem;
    left: 10rem;
  }
  .promiseList .p02 .photo {
    top: 124.9rem;
    left: 10rem;
  }
  .promiseList .p02 h3 {
    top: 154.1rem;
    left: 10rem;
    letter-spacing: -0.28rem;
  }
  .promiseList .p02 .bodyWrap {
    top: 164.91rem;
    left: 10rem;
  }
  .promiseList .p03 .num {
    top: 119rem;
    left: 74rem;
  }
  .promiseList .p03 .photo {
    top: 124.9rem;
    left: 74rem;
  }
  .promiseList .p03 h3 {
    top: 154.1rem;
    left: 74rem;
    letter-spacing: -0.084rem;
  }
  .promiseList .p03 .bodyWrap {
    top: 164.91rem;
    left: 74rem;
  }
  .promiseList .p04 .num {
    top: 187.5rem;
    left: 10rem;
  }
  .promiseList .p04 .photo {
    top: 193.4rem;
    left: 10rem;
  }
  .promiseList .p04 h3 {
    top: 222.6rem;
    left: 10rem;
    letter-spacing: -0.14rem;
  }
  .promiseList .p04 .bodyWrap {
    top: 233.41rem;
    left: 10rem;
  }
  .promiseList .p05 .num {
    top: 187.5rem;
    left: 74rem;
  }
  .promiseList .p05 .photo {
    top: 193.4rem;
    left: 74rem;
  }
  .promiseList .p05 h3 {
    top: 222.6rem;
    left: 74rem;
    letter-spacing: -0.14rem;
  }
  .promiseList .p05 .bodyWrap {
    top: 233.41rem;
    left: 74rem;
  }
}
@media all and (max-width: 896px) {
  .promiseList .p02 .photo {
    top: 91.4rem;
  }
  .promiseList .p02 .num {
    top: 103.9rem;
  }
  .promiseList .p02 h3 {
    top: 111.7rem;
    letter-spacing: -0.216rem;
  }
  .promiseList .p02 .bodyWrap {
    top: 118.61rem;
  }
  .promiseList .p03 .photo {
    top: 149.9rem;
  }
  .promiseList .p03 .num {
    top: 162.4rem;
  }
  .promiseList .p03 h3 {
    top: 170.2rem;
    letter-spacing: -0.054rem;
  }
  .promiseList .p03 .bodyWrap {
    top: 177.11rem;
  }
  .promiseList .p04 .photo {
    top: 216.3rem;
  }
  .promiseList .p04 .num {
    top: 228.8rem;
  }
  .promiseList .p04 h3 {
    top: 236.6rem;
    letter-spacing: -0.09rem;
  }
  .promiseList .p04 .bodyWrap {
    top: 243.51rem;
  }
  .promiseList .p05 .photo {
    top: 285.5rem;
  }
  .promiseList .p05 .num {
    top: 298rem;
  }
  .promiseList .p05 h3 {
    top: 305.8rem;
    letter-spacing: -0.09rem;
  }
  .promiseList .p05 .bodyWrap {
    top: 312.71rem;
  }
}

.promiseBtn {
  position: absolute;
  top: 267.9rem;
  left: 53.3rem;
}
@media all and (max-width: 896px) {
  .promiseBtn {
    top: 354.9rem;
    left: 2rem;
  }
}
.promiseBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.5rem;
  height: 7.2rem;
  border-radius: 4.05rem;
  background: #a5d423;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .promiseBtn a {
    height: 6.4rem;
  }
}
.promiseBtn .arrow {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 6.1rem;
  border-radius: 50%;
  background: #fff;
}
@media all and (max-width: 896px) {
  .promiseBtn .arrow {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 6.7rem;
  }
}
.promiseBtn .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #a5d423;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .promiseBtn .arrow::after {
    left: 0.7rem;
    top: 0.55rem;
    border-left-width: 0.5rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
@media (hover: hover) {
  .promiseBtn a:hover {
    opacity: 0.8;
  }
}

/*------------------------------------------------------------
	reason
------------------------------------------------------------*/
.reason {
  position: relative;
  overflow: hidden;
  height: 232.4rem;
}
@media all and (max-width: 896px) {
  .reason {
    height: 250.6rem;
  }
}
.reason {
  /* 画面両端の細い帯。140remコンテンツより外側だけに留め、本文の見切れを防ぐ */
}
.reason::before, .reason::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12.4rem;
  height: 100%;
  background: #f6f7f2;
  z-index: 2;
}
@media all and (min-width: 897px) {
  .reason::before, .reason::after {
    width: min(12.4rem, max(0px, 50vw - 70rem));
  }
}
@media all and (max-width: 896px) {
  .reason::before, .reason::after {
    width: 2rem;
  }
}
.reason::before {
  left: 0;
}
.reason::after {
  right: 0;
}

.reasonInner {
  position: relative;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .reasonInner {
    width: 100%;
  }
}

.reasonLogo {
  position: absolute;
  top: 12.5rem;
  left: 59.3rem;
  width: 24.2rem;
}
@media all and (max-width: 896px) {
  .reasonLogo {
    top: 3.9rem;
    left: 13.3rem;
    width: 11.1rem;
  }
}
.reasonLogo img {
  display: block;
  width: 100%;
}

.reasonTtl {
  position: absolute;
  top: 21.3rem;
  left: 34.9rem;
  width: 70.1rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: 5.4rem;
  line-height: 8.1rem;
  /* Zen Maru Gothic は Tsukushi より字幅が広いため詰めて Figma の行幅に合わせる */
  letter-spacing: -0.008rem;
  color: #505050;
  text-align: center;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .reasonTtl {
    top: 6.3rem;
    left: 7rem;
    width: 23.5rem;
    font-size: 3.46rem;
    line-height: 4.2rem;
    letter-spacing: -0.1rem;
  }
}
.reasonTtl small {
  font-size: 4rem;
  letter-spacing: 0.08rem;
}
@media all and (max-width: 896px) {
  .reasonTtl small {
    font-size: 2.6rem;
    letter-spacing: 0.052rem;
  }
}
.reasonTtl {
  /* 見出し左右の罫線 */
}
.reasonTtl::before, .reasonTtl::after {
  content: "";
  position: absolute;
  top: 4.2rem;
  width: 32.3rem;
  height: 0.1rem;
  background-image: linear-gradient(to right, #505050 0, #505050 0.4rem, transparent 0.4rem, transparent 0.8rem);
  background-repeat: repeat-x;
  background-size: 0.8rem 0.1rem;
  background-position: left bottom;
}
@media all and (max-width: 896px) {
  .reasonTtl::before, .reasonTtl::after {
    display: none;
  }
}
.reasonTtl::before {
  left: -34.9rem;
}
.reasonTtl::after {
  left: 102.8rem;
}

.reasonEn {
  position: absolute;
  top: 14.6rem;
  left: 96.9rem;
  width: 36.2rem;
}
@media all and (max-width: 896px) {
  .reasonEn {
    top: 9.3rem;
    left: 20.7rem;
    width: 15.4rem;
  }
}
.reasonEn img {
  display: block;
  width: 100%;
}

.reasonList .tint {
  position: absolute;
  width: 166rem;
}
@media all and (max-width: 896px) {
  .reasonList .tint {
    width: 35.5rem;
  }
}
.reasonList .photo {
  position: absolute;
  width: 92rem;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .reasonList .photo {
    left: 4rem;
    width: 29.5rem;
    height: 19rem;
    border-radius: 1rem;
  }
}
.reasonList .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reasonList .photo {
  /* 差し替えしやすいよう、帯グラデは画像ではなくCSSで乗せる */
}
.reasonList .photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8.6rem;
  pointer-events: none;
  z-index: 1;
}
.reasonList .r01 .photo::after,
.reasonList .r03 .photo::after {
  background: linear-gradient(to bottom, rgba(91, 169, 209, 0) 0%, #5ba9d1 50%, #5ba9d1 100%);
}
.reasonList .r02 .photo::after,
.reasonList .r04 .photo::after {
  background: linear-gradient(to bottom, rgba(165, 212, 35, 0) 0%, #a5d423 50%, #a5d423 100%);
}
.reasonList .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.6rem;
  z-index: 2;
  white-space: nowrap;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
@media all and (max-width: 896px) {
  .reasonList .caption {
    bottom: 1.2rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}
.reasonList .txt {
  position: absolute;
  width: 62rem;
}
@media all and (max-width: 896px) {
  .reasonList .txt {
    left: 4rem;
    width: 29.5rem;
  }
}
.reasonList .sub {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .reasonList .sub {
    font-size: 1.6rem;
    line-height: 2.5rem;
    text-align: center;
  }
}
.reasonList h3 {
  margin-top: 0.5rem;
  font-size: 4.4rem;
  line-height: 6.6rem;
  font-weight: 700;
}
@media all and (max-width: 896px) {
  .reasonList h3 {
    margin-top: 0;
    font-size: 2.4rem;
    line-height: 4.5rem;
    text-align: center;
  }
}
.reasonList .body {
  margin-top: 1.9rem;
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: #505050;
  text-align: justify;
}
@media all and (max-width: 896px) {
  .reasonList .body {
    font-size: 1.4rem;
    /* FigmaはSPの本文に約物半角（halt）が掛かっている */
    font-feature-settings: "halt" 1;
  }
}
.reasonList .body + .body {
  margin-top: 1rem;
}
.reasonList .r01 h3, .reasonList .r03 h3 {
  color: #5ba9d1;
}
.reasonList .r02 h3, .reasonList .r04 h3 {
  color: #a5d423;
}
@media all and (min-width: 897px) {
  .reasonList {
    /* 色面は reasonInner（140rem）内に固定。写真だけビューポート端まで伸ばし、
       パネルの外へはみ出させる。内側端は本文手前（66rem / 74rem）で止めて見切れを防ぐ。 */
  }
  .reasonList .tint {
    left: 0;
    width: 100%;
  }
  .reasonList .r01 .photo,
  .reasonList .r03 .photo {
    left: calc(50% - 50vw);
    width: calc(50vw - 4rem);
  }
  .reasonList .r02 .photo,
  .reasonList .r04 .photo {
    left: auto;
    right: calc(50% - 50vw);
    width: calc(50vw - 4rem);
  }
  .reasonList .r01 .tint {
    top: 38.4rem;
    height: 35.6rem;
    background: #ecf8fc;
    border-radius: 2rem;
  }
  .reasonList .r01 .photo {
    top: 34.3rem;
    height: 35.6rem;
    border-radius: 0 2rem 2rem 0;
  }
  .reasonList .r01 .caption,
  .reasonList .r03 .caption {
    left: calc(min(12.4rem, max(0px, 50vw - 70rem)) + 2rem);
    padding: 0 2rem 0 0;
  }
  .reasonList .r01 .txt {
    top: 44.5rem;
    left: 73.2rem;
  }
  .reasonList .r02 .tint {
    top: 80.7rem;
    height: 35.6rem;
    background: rgba(210, 219, 71, 0.15);
    border-radius: 2rem;
  }
  .reasonList .r02 .photo {
    top: 76.6rem;
    height: 35.6rem;
    border-radius: 2rem 0 0 2rem;
  }
  .reasonList .r02 .caption,
  .reasonList .r04 .caption {
    right: calc(min(12.4rem, max(0px, 50vw - 70rem)) + 2rem);
    padding: 0 0 0 2rem;
  }
  .reasonList .r02 .txt {
    top: 87.3rem;
    left: 5rem;
  }
  .reasonList .r03 .tint {
    top: 123rem;
    height: 39.7rem;
    background: rgba(127, 205, 236, 0.15);
    border-radius: 2rem;
  }
  .reasonList .r03 .photo {
    top: 118.9rem;
    height: 39.7rem;
    border-radius: 0 2rem 2rem 0;
  }
  .reasonList .r03 .txt {
    top: 129.3rem;
    left: 73.2rem;
  }
  .reasonList .r04 .tint {
    top: 169.4rem;
    height: 37.6rem;
    background: rgba(210, 219, 71, 0.15);
    border-radius: 2rem;
  }
  .reasonList .r04 .photo {
    top: 165.3rem;
    height: 37.6rem;
    border-radius: 2rem 0 0 2rem;
  }
  .reasonList .r04 .txt {
    top: 176.4rem;
    left: 5rem;
  }
  .reasonList .r01 h3 {
    margin-top: -0.2rem;
  }
  .reasonList .r02 h3 {
    margin-top: -0.4rem;
  }
  .reasonList .r03 h3 {
    margin-top: -0.1rem;
  }
  .reasonList .r04 h3 {
    margin-top: -0.5rem;
  }
  .reasonList .r01 h3 {
    font-size: 4.2rem;
    line-height: 6.3rem;
  }
  .reasonList .r01 .body {
    margin-top: 2.2rem;
  }
  .reasonList .r02 .body, .reasonList .r04 .body {
    margin-top: 1.9rem;
  }
}
@media all and (max-width: 896px) {
  .reasonList .r01 .tint {
    top: 20.1rem;
    left: 0;
    height: 47.3rem;
    background: #ecf8fc;
    border-radius: 0 2rem 2rem 0;
  }
  .reasonList .r01 .photo {
    top: 17rem;
  }
  .reasonList .r01 .txt {
    top: 38.7rem;
  }
  .reasonList .r02 .tint {
    top: 72.4rem;
    left: 2rem;
    height: 47.4rem;
    background: rgba(210, 219, 71, 0.15);
    border-radius: 2rem 0 0 2rem;
  }
  .reasonList .r02 .photo {
    top: 69.3rem;
  }
  .reasonList .r02 .txt {
    top: 90.5rem;
  }
  .reasonList .r03 .tint {
    top: 124.8rem;
    left: 0;
    height: 54.4rem;
    background: #ecf8fc;
    border-radius: 0 2rem 2rem 0;
  }
  .reasonList .r03 .photo {
    top: 121.7rem;
  }
  .reasonList .r03 .txt {
    top: 143rem;
  }
  .reasonList .r04 .tint {
    top: 184.1rem;
    left: 2rem;
    height: 51rem;
    background: rgba(210, 219, 71, 0.15);
    border-radius: 2rem 0 0 2rem;
  }
  .reasonList .r04 .photo {
    top: 181rem;
  }
  .reasonList .r04 .txt {
    top: 202.2rem;
  }
  .reasonList h3 + .body {
    margin-top: 1.2rem;
  }
}

.reasonBtn {
  position: absolute;
  top: 213.2rem;
  left: 53.2rem;
}
@media all and (max-width: 896px) {
  .reasonBtn {
    top: 238.7rem;
    left: 2rem;
  }
}
.reasonBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.5rem;
  height: 7.2rem;
  border-radius: 4.05rem;
  background: #a5d423;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .reasonBtn a {
    height: 6.4rem;
  }
}
.reasonBtn .arrow {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 5.2rem;
  border-radius: 50%;
  background: #fff;
}
@media all and (max-width: 896px) {
  .reasonBtn .arrow {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 5.7rem;
  }
}
.reasonBtn .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #a5d423;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .reasonBtn .arrow::after {
    left: 0.7rem;
    top: 0.55rem;
    border-left-width: 0.5rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
@media (hover: hover) {
  .reasonBtn a:hover {
    opacity: 0.8;
  }
}

/*------------------------------------------------------------
	doctor
------------------------------------------------------------*/
.doctor {
  position: relative;
  overflow: hidden;
  height: 170rem;
}
@media all and (max-width: 896px) {
  .doctor {
    height: 148.1rem;
  }
}

.doctorTop,
.doctorBg {
  position: absolute;
  left: 0;
  width: 100%;
}
.doctorTop img,
.doctorBg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctorTop {
  top: 0;
  height: 40rem;
}
@media all and (max-width: 896px) {
  .doctorTop {
    height: 17rem;
  }
}

.doctorBg {
  top: 40rem;
  height: 130rem;
  background: #d7f1fb;
}
@media all and (max-width: 896px) {
  .doctorBg {
    top: 17rem;
    height: 130.8rem;
  }
}

.doctorInner {
  position: relative;
  z-index: 1;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .doctorInner {
    width: 100%;
  }
}

.doctorEn {
  position: absolute;
  top: 52rem;
  left: 31.3rem;
  width: 36.2rem;
}
@media all and (max-width: 896px) {
  .doctorEn {
    top: 21.3rem;
    left: 20.6rem;
    width: 15.5rem;
  }
}
.doctorEn img {
  display: block;
  width: 100%;
}

.doctorTtl {
  position: absolute;
  top: 56.7rem;
  left: 8.7rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 5.4rem;
  line-height: 8.1rem;
  letter-spacing: -0.033rem;
  color: #505050;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .doctorTtl {
    top: 22rem;
    left: 8.7rem;
    font-size: 3.6rem;
    line-height: 5.4rem;
    letter-spacing: -0.252rem;
  }
}

.doctorCard {
  position: absolute;
  top: 67.1rem;
  left: 0;
  width: 140rem;
  height: 86.9rem;
  background: #fff;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .doctorCard {
    top: 29rem;
    left: 2rem;
    width: 33.5rem;
    height: 104.4rem;
    border-radius: 1rem;
  }
}

.doctorLogo {
  position: absolute;
  top: 47.9rem;
  left: 115.4rem;
  width: 44.3rem;
}
@media all and (max-width: 896px) {
  .doctorLogo {
    top: 22.7rem;
    left: 22.1rem;
    width: 15.5rem;
  }
}
.doctorLogo img {
  display: block;
  width: 100%;
}

.doctorPhoto {
  position: absolute;
  top: -7.1rem;
  left: 75.8rem;
  width: 54.2rem;
  height: 68.9rem;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .doctorPhoto {
    top: 1.8rem;
    left: 2rem;
    width: 29.5rem;
    height: 29.5rem;
    border-radius: 1rem;
  }
}
.doctorPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctorRole {
  position: absolute;
  top: 7.1rem;
  left: 10rem;
  font-size: 2.2rem;
  line-height: 3.3rem;
  font-weight: 700;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .doctorRole {
    top: 33.1rem;
    left: 0;
    width: 100%;
    font-size: 1.8rem;
    line-height: 2.7rem;
    text-align: center;
  }
}

.doctorName {
  position: absolute;
  top: 10.7rem;
  left: 9.7rem;
  font-size: 3.8rem;
  line-height: 5.7rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .doctorName {
    top: 35.4rem;
    left: 0;
    width: 100%;
    font-size: 3.2rem;
    line-height: 4.8rem;
    text-align: center;
  }
}

.doctorBody {
  position: absolute;
  top: 18.1rem;
  left: 9.7rem;
  width: 56rem;
  font-size: 1.6rem;
  line-height: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: #505050;
  text-align: justify;
}
@media all and (max-width: 896px) {
  .doctorBody {
    top: 41rem;
    left: 2.3rem;
    width: 29.2rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: 0;
  }
}

.doctorData {
  position: absolute;
  left: 10rem;
  width: 56rem;
}
@media all and (max-width: 896px) {
  .doctorData {
    left: 2rem;
    width: 29.5rem;
  }
}
.doctorData .dTtl {
  display: flex;
  align-items: center;
  height: 5.2rem;
  padding-left: 1.8rem;
  background-image: linear-gradient(to right, #eaf7fc 0%, #eaf7fc 65.7%, rgba(234, 247, 252, 0) 100%);
  font-size: 2rem;
  line-height: 4.2rem;
  font-weight: 700;
  color: #686868;
}
@media all and (max-width: 896px) {
  .doctorData .dTtl {
    height: 4.2rem;
    padding-left: 1.3rem;
    font-size: 1.6rem;
  }
}
.doctorData ul {
  margin-top: 2.31rem;
}
@media all and (max-width: 896px) {
  .doctorData ul {
    margin-top: 1.91rem;
  }
}
.doctorData li {
  position: relative;
  padding-left: 2.1rem;
  font-size: 1.6rem;
  line-height: 3.2rem;
  font-weight: 500;
  color: #505050;
}
@media all and (max-width: 896px) {
  .doctorData li {
    font-size: 1.3rem;
    line-height: 2.8rem;
    /* Zen Maru Gothic は字幅が広く4行目が折り返すため詰める */
    letter-spacing: -0.08rem;
  }
}
.doctorData li::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #d2db47;
}
@media all and (max-width: 896px) {
  .doctorData li::before {
    top: 0.9rem;
  }
}
.doctorData.d1 {
  top: 44rem;
}
@media all and (max-width: 896px) {
  .doctorData.d1 {
    top: 71.6rem;
  }
}
.doctorData.d2 {
  top: 67.4rem;
}
@media all and (max-width: 896px) {
  .doctorData.d2 {
    top: 90rem;
  }
}

.doctorBtn {
  position: absolute;
  top: 68.9rem;
  left: 75.8rem;
}
@media all and (max-width: 896px) {
  .doctorBtn {
    top: 107.4rem;
    left: 0;
  }
}
.doctorBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.5rem;
  height: 7.2rem;
  border-radius: 4.05rem;
  background: #a5d423;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .doctorBtn a {
    height: 6.4rem;
  }
}
.doctorBtn .arrow {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 4.3rem;
  border-radius: 50%;
  background: #fff;
}
@media all and (max-width: 896px) {
  .doctorBtn .arrow {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 4.8rem;
  }
}
.doctorBtn .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #a5d423;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .doctorBtn .arrow::after {
    left: 0.7rem;
    top: 0.55rem;
    border-left-width: 0.5rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
@media (hover: hover) {
  .doctorBtn a:hover {
    opacity: 0.8;
  }
}

/*------------------------------------------------------------
	treatment
------------------------------------------------------------*/
.treatment {
  position: relative;
  overflow: hidden;
  padding-bottom: 13rem;
  background: linear-gradient(90deg, #f7f9e2 0%, #ffffff 49.52%, #e7f6fb 100%);
}
@media all and (max-width: 896px) {
  .treatment {
    padding-bottom: 4.6rem;
  }
}

.treatInner {
  position: relative;
  width: 140rem;
  /* タブ帯（951px / SP 1200px）までの領域を確保 */
  height: 95.1rem;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .treatInner {
    width: 100%;
    height: 120rem;
  }
}

.treatLogo {
  position: absolute;
  z-index: 1;
  top: 12rem;
  left: 65.5rem;
  width: 9rem;
}
@media all and (max-width: 896px) {
  .treatLogo {
    top: 5rem;
    left: 16.8rem;
    width: 4rem;
  }
}
.treatLogo img {
  display: block;
  width: 100%;
}

.treatTtl {
  position: absolute;
  z-index: 1;
  top: 22.7rem;
  left: 59.2rem;
  width: 21.6rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 5.4rem;
  line-height: 8.1rem;
  letter-spacing: -0.033rem;
  color: #505050;
  text-align: center;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .treatTtl {
    top: 9.5rem;
    left: 12.9rem;
    width: 11.8rem;
    font-size: 2.8rem;
    line-height: 4.2rem;
  }
}

.treatEn {
  position: absolute;
  top: 22rem;
  left: 37.3rem;
  width: 60.9rem;
}
@media all and (max-width: 896px) {
  .treatEn {
    top: 9.1rem;
    left: 7.5rem;
    width: 22.5rem;
  }
}
.treatEn img {
  display: block;
  width: 100%;
}

.treatCat {
  position: absolute;
  top: 51.7rem;
  left: calc(50% - min(92rem, 50vw));
  display: flex;
  width: min(184rem, 100vw);
}
@media all and (max-width: 896px) {
  .treatCat {
    position: static;
    display: block;
    width: auto;
    padding-top: 19rem;
  }
}
.treatCat li {
  position: relative;
  flex: 1;
  height: 33.4rem;
}
@media all and (max-width: 896px) {
  .treatCat li {
    height: 20.6rem;
    margin: 0 2rem;
    border-radius: 1rem;
  }
  .treatCat li + li {
    margin-top: 4.2rem;
  }
}
.treatCat .treatCat-card {
  position: relative;
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  .treatCat .treatCat-card:hover {
    opacity: 0.72;
    filter: brightness(0.94);
    transform: scale(1.02);
  }
}
.treatCat .t01 {
  background: #e7ec9c;
  border-radius: 2rem 0 0 2rem;
}
@media all and (max-width: 896px) {
  .treatCat .t01 {
    border-radius: 1rem;
  }
}
.treatCat .t02 {
  background: #e7e9ea;
}
.treatCat .t03 {
  background: #bbe5f5;
}
.treatCat .t04 {
  background: #d8d3ca;
  border-radius: 0 2rem 2rem 0;
}
@media all and (max-width: 896px) {
  .treatCat .t04 {
    border-radius: 1rem;
  }
}
.treatCat .photo {
  position: absolute;
  top: -3.9rem;
  left: 50%;
  width: 30.1rem;
  height: 19.2rem;
  overflow: hidden;
  border-radius: 2rem;
  transform: translateX(-50%);
}
@media all and (max-width: 896px) {
  .treatCat .photo {
    top: -2.6rem;
    width: 29.5rem;
    height: 10rem;
    border-radius: 1rem;
  }
}
.treatCat .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.treatCat .ttl {
  position: absolute;
  top: 17.2rem;
  left: 0;
  width: 100%;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 5.4rem;
  color: #505050;
  text-align: center;
}
@media all and (max-width: 896px) {
  .treatCat .ttl {
    top: 8.8rem;
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
.treatCat .arrow {
  position: absolute;
  top: 1.6rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #7fcdec;
}
@media all and (max-width: 896px) {
  .treatCat .arrow {
    top: 0.8rem;
    width: 2rem;
    height: 2rem;
  }
}
.treatCat .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #fff;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .treatCat .arrow::after {
    left: 0.7rem;
    top: 0.65rem;
    border-left-width: 0.6rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
.treatCat .t01 .arrow {
  left: calc(50% + 8.3rem);
}
.treatCat .t02 .arrow {
  left: calc(50% + 10.8rem);
}
.treatCat .t03 .arrow {
  left: calc(50% + 10.1rem);
}
.treatCat .t04 .arrow {
  left: calc(50% + 13.8rem);
}
@media all and (max-width: 896px) {
  .treatCat .t01 .arrow {
    left: calc(50% + 5.75rem);
  }
  .treatCat .t02 .arrow {
    left: calc(50% + 7.75rem);
  }
  .treatCat .t03 .arrow {
    left: calc(50% + 5.75rem);
  }
  .treatCat .t04 .arrow {
    left: calc(50% + 9.15rem);
  }
}
.treatCat .desc {
  position: absolute;
  top: 23.2rem;
  left: 0;
  width: 100%;
  font-size: 2rem;
  line-height: 3.2rem;
  font-weight: 700;
  color: #505050;
  text-align: center;
}
@media all and (max-width: 896px) {
  .treatCat .desc {
    top: 13.2rem;
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}
.treatCat .desc em {
  font-style: normal;
  color: #5ba9d1;
}

.treatTabWrap {
  position: relative;
  width: 148rem;
  max-width: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .treatTabWrap {
    width: 100%;
    padding: 0 2rem;
  }
}

.treatPanel {
  position: relative;
}
.treatPanel[hidden] {
  display: none;
}

.treatTab {
  position: relative;
  z-index: 1;
  width: 68rem;
  height: 8.2rem;
  margin: 0 auto;
  border-radius: 5rem;
  background: #fff;
}
@media all and (max-width: 896px) {
  .treatTab {
    width: 33.5rem;
    height: 4.8rem;
  }
}
.treatTab li {
  position: absolute;
  top: 0;
  width: 37.4rem;
  height: 100%;
}
@media all and (max-width: 896px) {
  .treatTab li {
    width: 18.4rem;
  }
}
.treatTab li:first-child {
  left: 0;
}
.treatTab li:last-child {
  right: 0;
}
.treatTab button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 5rem;
  background: none;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3.3rem;
  letter-spacing: 0.066rem;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.25s, color 0.25s;
}
@media all and (max-width: 896px) {
  .treatTab button {
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}
.treatTab li:first-child button {
  color: #7fcdec;
}
.treatTab li:last-child button {
  color: #a5d423;
}
.treatTab li:first-child button[aria-selected=true] {
  background: #7fcdec;
  color: #fff;
}
.treatTab li:last-child button[aria-selected=true] {
  background: #a5d423;
  color: #fff;
}
.treatTab button[aria-selected=true] {
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .treatTab button[aria-selected=false]:hover {
    opacity: 0.65;
  }
}
.treatTab button:focus-visible {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

.treatBox {
  position: relative;
  margin-top: -4.1rem;
  padding-top: 4.1rem;
  border-radius: 2rem;
  background: linear-gradient(270deg, rgba(127, 205, 236, 0.2) 0%, rgba(210, 219, 71, 0.2) 100%);
}
@media all and (max-width: 896px) {
  .treatBox {
    margin-top: -2.5rem;
    padding-top: 2.5rem;
    border-radius: 1rem;
  }
}
.p1 .treatBox {
  height: auto;
  margin-top: -3.7rem;
  padding: 3.7rem 0 6rem;
}
@media all and (max-width: 896px) {
  .p1 .treatBox {
    margin-top: -2.5rem;
    padding: 2.5rem 0 4rem;
  }
}
.p2 .treatBox {
  height: 86.6rem;
}
@media all and (max-width: 896px) {
  .p2 .treatBox {
    height: 113.9rem;
  }
}

.treatBoxTtl {
  position: absolute;
  top: 9.2rem;
  left: 0;
  width: 100%;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 5.1rem;
  letter-spacing: 0.068rem;
  color: #505050;
  text-align: center;
}
@media all and (max-width: 896px) {
  .treatBoxTtl {
    top: 4.7rem;
    font-size: 2.2rem;
    line-height: 3.3rem;
    letter-spacing: -0.088rem;
  }
}

.treatSymCats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8rem;
  padding: 14rem 9.2rem 1rem;
}
@media all and (max-width: 896px) {
  .treatSymCats {
    gap: 3.2rem;
    padding: 8.8rem 0 0;
  }
}

.treatSymCatTtl {
  width: 117.6rem;
  max-width: 100%;
  margin: 0 auto 3rem;
  padding-bottom: 0.6rem;
  background-image: linear-gradient(to right, #505050 0, #505050 0.1rem, transparent 0.1rem, transparent 0.4rem);
  background-repeat: repeat-x;
  background-size: 0.4rem 0.1rem;
  background-position: left bottom;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: #505050;
}
@media all and (max-width: 896px) {
  .treatSymCatTtl {
    width: 29.5rem;
    margin-bottom: 1.4rem;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}

.treatSymList {
  display: grid;
  grid-template-columns: repeat(5, 20.8rem);
  justify-content: center;
  column-gap: 3.4rem;
  row-gap: 1.6rem;
}
@media all and (max-width: 896px) {
  .treatSymList {
    grid-template-columns: repeat(2, 13.8rem);
    justify-content: center;
    column-gap: 1.9rem;
    row-gap: 1.3rem;
  }
}
.treatSymList li:nth-child(even) {
  margin-top: 3.4rem;
}
@media all and (max-width: 896px) {
  .treatSymList li:nth-child(even) {
    margin-top: 0;
  }
}
.treatSymList .bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.8rem;
  height: 14.7rem;
  padding: 0 1.6rem 0.5rem;
  background: url(../img/index/treat_bubble.webp) no-repeat top center/100% auto;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: #5ba9d1;
  text-align: center;
}
@media all and (max-width: 896px) {
  .treatSymList .bubble {
    width: 13.8rem;
    height: 9.9rem;
    padding: 0 1rem 0.4rem;
    background-image: url(../img/index/treat_bubble_sp.webp);
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.treatSymList .arrow {
  position: absolute;
  top: 1.1rem;
  right: 2.3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #7fcdec;
}
@media all and (max-width: 896px) {
  .treatSymList .arrow {
    top: 0;
    right: 1.7rem;
    width: 2rem;
    height: 2rem;
  }
}
.treatSymList .arrow::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 0.95rem;
  border-left: 0.8rem solid #fff;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
}
@media all and (max-width: 896px) {
  .treatSymList .arrow::after {
    left: 0.7rem;
    top: 0.65rem;
    border-left-width: 0.6rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}

.treatGrp li.g1, .treatGrp li.g2, .treatGrp li.g3, .treatGrp li.g4, .treatGrp li.g5, .treatGrp li.g6, .treatGrp li.g7 {
  position: absolute;
  width: 29.6rem;
}
.treatGrp .gTtl {
  position: relative;
  height: 5.1rem;
  padding-bottom: 0.6rem;
  background-image: linear-gradient(to right, #505050 0, #505050 0.1rem, transparent 0.1rem, transparent 0.4rem);
  background-repeat: repeat-x;
  background-size: 0.4rem 0.1rem;
  background-position: left bottom;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 4.5rem;
  color: #505050;
}
@media all and (max-width: 896px) {
  .treatGrp .gTtl {
    height: 3.3rem;
    padding-bottom: 0.6rem;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}
.treatGrp .gTtl small {
  font-size: 1.6rem;
}
@media all and (max-width: 896px) {
  .treatGrp .gTtl small {
    font-size: inherit;
  }
}
.treatGrp .gTtl .ico {
  position: absolute;
  top: -1.7rem;
  right: 0;
  display: block;
  width: 7.6rem;
}
@media all and (max-width: 896px) {
  .treatGrp .gTtl .ico {
    top: -0.4rem;
    width: 5.8rem;
  }
}
.treatGrp .gTtl .ico img {
  display: block;
  width: 100%;
}
.treatGrp .gList {
  margin-top: 2.9rem;
}
@media all and (max-width: 896px) {
  .treatGrp .gList {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0.8rem;
    margin-top: 2.2rem;
  }
}
.treatGrp .gList li + li {
  margin-top: 1.6rem;
}
@media all and (max-width: 896px) {
  .treatGrp .gList li + li {
    margin-top: 0;
  }
}
@media all and (max-width: 896px) {
  .treatGrp .gList {
    /* 2列ぴったりに収める（Figma 144px×2＋gap8px＝296px） */
  }
  .treatGrp .gList li {
    width: calc((100% - 0.8rem) / 2);
  }
  .treatGrp .gList li.wide {
    width: 100%;
  }
}
.treatGrp .gList a {
  position: relative;
  display: flex;
  align-items: center;
  width: 29.6rem;
  height: 5rem;
  padding-left: 4rem;
  border-radius: 5.5rem;
  background: #fff;
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .treatGrp .gList a {
    width: 100%;
    height: 4rem;
    padding-left: 1.7rem;
    font-size: 1.4rem;
  }
}
.treatGrp .gList .wide a {
  letter-spacing: -0.1rem;
}
@media all and (max-width: 896px) {
  .treatGrp .gList .wide a {
    letter-spacing: 0;
  }
}
.treatGrp .gList small {
  font-size: 1rem;
  letter-spacing: -0.1rem;
}
@media all and (max-width: 896px) {
  .treatGrp .gList small {
    letter-spacing: 0;
  }
}
.treatGrp .gList .arrow {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: -0.9rem;
  border-radius: 50%;
  background: #a5d423;
}
@media all and (max-width: 896px) {
  .treatGrp .gList .arrow {
    right: 0.9rem;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.7rem;
  }
}
.treatGrp .gList .arrow::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0.55rem;
  border-left: 0.5rem solid #fff;
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
}
@media all and (max-width: 896px) {
  .treatGrp .gList .arrow::after {
    left: 0.55rem;
    top: 0.45rem;
    border-left-width: 0.4rem;
    border-top-width: 0.25rem;
    border-bottom-width: 0.25rem;
  }
}
@media all and (min-width: 897px) {
  .treatGrp .g1 {
    top: 11.6rem;
    left: 9.2rem;
  }
  .treatGrp .g2 {
    top: 11.6rem;
    left: 43rem;
  }
  .treatGrp .g3 {
    top: 11.6rem;
    left: 76.3rem;
  }
  .treatGrp .g4 {
    top: 11.6rem;
    left: 109.6rem;
  }
  .treatGrp .g5 {
    top: 51.2rem;
    left: 9.2rem;
  }
  .treatGrp .g6 {
    top: 51.2rem;
    left: 43rem;
  }
  .treatGrp .g7 {
    top: 51.2rem;
    left: 76.3rem;
  }
}
@media all and (max-width: 896px) {
  .treatGrp .g1 {
    top: 5.3rem;
    left: 2rem;
  }
  .treatGrp .g2 {
    top: 27.5rem;
    left: 2rem;
  }
  .treatGrp .g3 {
    top: 39.8rem;
    left: 2rem;
  }
  .treatGrp .g4 {
    top: 57.1rem;
    left: 2rem;
  }
  .treatGrp .g5 {
    top: 69.4rem;
    left: 2rem;
  }
  .treatGrp .g6 {
    top: 87.1rem;
    left: 2rem;
  }
  .treatGrp .g7 {
    top: 99.4rem;
    left: 2rem;
  }
}

/*------------------------------------------------------------
	case
------------------------------------------------------------*/
.case {
  position: relative;
  overflow: hidden;
  height: 108.6rem;
}
@media all and (max-width: 896px) {
  .case {
    height: 134.8rem;
  }
}

.caseBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110.1rem;
  background: #f1fad7;
}
@media all and (max-width: 896px) {
  .caseBg {
    height: 134.8rem;
  }
}
.caseBg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caseInner {
  position: relative;
  z-index: 1;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .caseInner {
    width: 100%;
  }
}

.caseTtl {
  position: absolute;
  top: 11rem;
  left: 59.2rem;
  width: 21.6rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 5.4rem;
  line-height: 8.1rem;
  letter-spacing: -0.033rem;
  color: #505050;
  text-align: center;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .caseTtl {
    top: 5rem;
    left: 12.8rem;
    width: 12rem;
    font-size: 3rem;
    line-height: 4.5rem;
  }
}

.caseEn {
  position: absolute;
  top: 8.1rem;
  left: 74rem;
  width: 24.9rem;
}
@media all and (max-width: 896px) {
  .caseEn {
    top: 4.3rem;
    left: 22.6rem;
    width: 10.7rem;
  }
}
.caseEn img {
  display: block;
  width: 100%;
}

.caseFilter {
  position: absolute;
  top: 23.1rem;
  left: 25.5rem;
  display: flex;
  gap: 3rem;
}
@media all and (max-width: 896px) {
  .caseFilter {
    top: 12.2rem;
    left: 2rem;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    width: 33.5rem;
  }
}
.caseFilter li {
  width: 20rem;
}
@media all and (max-width: 896px) {
  .caseFilter li {
    width: 16rem;
  }
}
.caseFilter button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5.2rem;
  padding: 0;
  border: 0;
  border-radius: 3.974rem;
  background: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
  color: #505050;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.25s, color 0.25s;
}
@media all and (max-width: 896px) {
  .caseFilter button {
    height: 3.4rem;
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}
.caseFilter button[aria-selected=true] {
  background: #7fcdec;
  color: #fff;
}
@media (hover: hover) {
  .caseFilter button[aria-selected=false]:hover {
    background: rgba(127, 205, 236, 0.35);
  }
}
.caseFilter button:focus-visible {
  outline: 0.2rem solid #505050;
  outline-offset: 0.2rem;
}

.caseEmpty {
  position: absolute;
  top: 34.3rem;
  left: 0;
  width: 140rem;
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-weight: 700;
  color: #505050;
  text-align: center;
}
@media all and (max-width: 896px) {
  .caseEmpty {
    top: 23rem;
    width: 100%;
    font-size: 1.6rem;
  }
}
.caseEmpty[hidden] {
  display: none;
}

.caseList {
  /* タブで絞り込むため flex で並べ替え可能に */
  position: absolute;
  top: 34.3rem;
  left: 0;
  display: flex;
  gap: 8rem;
  width: 140rem;
}
@media all and (max-width: 896px) {
  .caseList {
    top: 23rem;
    left: 2rem;
    display: block;
    width: 33.5rem;
  }
}
.caseList li {
  position: relative;
  flex: 0 0 66rem;
  width: 66rem;
  height: 63.8rem;
  border: 0.1rem solid #7fcdec;
  border-radius: 2rem;
  background: #fff;
}
@media all and (max-width: 896px) {
  .caseList li {
    width: 33.5rem;
    height: 52.4rem;
    border-radius: 1rem;
  }
}
.caseList li[hidden] {
  display: none;
}
@media all and (max-width: 896px) {
  .caseList li + li {
    margin-top: 2rem;
  }
}
.caseList h3 {
  position: absolute;
  top: 5rem;
  left: 5rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 5.4rem;
  color: #505050;
}
@media all and (max-width: 896px) {
  .caseList h3 {
    top: 2.4rem;
    left: 0;
    width: 100%;
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: -0.06rem;
    text-align: center;
  }
}
.caseList h3::after {
  content: "";
  position: absolute;
  top: 5.6rem;
  left: 5rem;
  width: 56rem;
  height: 0.1rem;
  background-image: linear-gradient(to right, #505050 0, #505050 0.1rem, transparent 0.1rem, transparent 0.4rem);
  background-repeat: repeat-x;
  background-size: 0.4rem 0.1rem;
  background-position: left bottom;
}
@media all and (max-width: 896px) {
  .caseList h3::after {
    top: 3.7rem;
    left: 2rem;
    width: 29.5rem;
  }
}
.caseList .ba {
  position: absolute;
  top: 13.6rem;
  left: 5rem;
  display: flex;
  gap: 4rem;
}
@media all and (max-width: 896px) {
  .caseList .ba {
    top: 7.9rem;
    left: 2rem;
    gap: 0.5rem;
  }
}
.caseList .before,
.caseList .after {
  position: relative;
  width: 26rem;
  height: 14.8rem;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .caseList .before,
  .caseList .after {
    width: 14.5rem;
    height: 7.8rem;
  }
}
.caseList .before img,
.caseList .after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.caseList .lb {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 3.6rem;
  background-image: linear-gradient(to right, #eaf7fc 0%, #eaf7fc 75.8%, rgba(234, 247, 252, 0) 100%);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 4.2rem;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .caseList .lb {
    width: 5.6rem;
    height: 1.9rem;
    font-size: 1rem;
  }
}
.caseList .tag {
  position: absolute;
  top: 30.2rem;
  left: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13rem;
  height: 2.9rem;
  border-radius: 1.45rem;
  background: rgba(127, 205, 236, 0.3);
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: #505050;
}
@media all and (max-width: 896px) {
  .caseList .tag {
    top: 17.1rem;
    left: 2rem;
    width: 9.4rem;
    height: 2.6rem;
    font-size: 1.2rem;
    letter-spacing: -0.012rem;
  }
}
.caseList .body {
  position: absolute;
  top: 35.2rem;
  left: 4.9rem;
  width: 56.1rem;
  font-size: 1.6rem;
  line-height: 3.2rem;
  font-weight: 500;
  letter-spacing: -0.016rem;
  color: #505050;
  text-align: justify;
}
@media all and (max-width: 896px) {
  .caseList .body {
    top: 21.5rem;
    left: 2rem;
    width: 29.5rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: 0;
    /* FigmaはSPの本文に約物半角（halt）が掛かっている */
    font-feature-settings: "halt" 1;
  }
}
.caseList .btn {
  position: absolute;
  top: 53.2rem;
  left: 16.2rem;
}
@media all and (max-width: 896px) {
  .caseList .btn {
    top: 45rem;
    left: 1.7rem;
  }
}
.caseList .btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.5rem;
  height: 5.6rem;
  border-radius: 4.05rem;
  background: #7fcdec;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .caseList .btn a {
    width: 29.5rem;
    height: 5rem;
    font-size: 1.6rem;
    line-height: 2.4rem;
    letter-spacing: 0.08rem;
  }
}
.caseList .btn .arrow {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 3.3rem;
  border-radius: 50%;
  background: #fff;
}
@media all and (max-width: 896px) {
  .caseList .btn .arrow {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 3.3rem;
  }
}
.caseList .btn .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #7fcdec;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .caseList .btn .arrow::after {
    left: 0.7rem;
    top: 0.55rem;
    border-left-width: 0.5rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
@media (hover: hover) {
  .caseList .btn a:hover {
    opacity: 0.8;
  }
}

/*------------------------------------------------------------
	visitor
------------------------------------------------------------*/
.visitor {
  position: relative;
  overflow: hidden;
  height: 354.1rem;
}
@media all and (max-width: 896px) {
  .visitor {
    height: 451rem;
  }
}

.visitInner {
  position: relative;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .visitInner {
    width: 100%;
  }
}

.visitLogo {
  position: absolute;
  top: 12rem;
  left: 65.5rem;
  width: 9rem;
}
@media all and (max-width: 896px) {
  .visitLogo {
    top: 5rem;
    left: 16.8rem;
    width: 4rem;
  }
}
.visitLogo img {
  display: block;
  width: 100%;
}

.visitTtl {
  position: absolute;
  top: 22.7rem;
  left: 32.3rem;
  width: 75.4rem;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 5.4rem;
  line-height: 8.1rem;
  letter-spacing: -0.033rem;
  color: #505050;
  text-align: center;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .visitTtl {
    top: 9.5rem;
    left: 2.5rem;
    width: 32.6rem;
    font-size: 2.6rem;
    line-height: 4.05rem;
    letter-spacing: -0.13rem;
  }
}

.visitEn {
  position: absolute;
  top: 13.4rem;
  left: 94rem;
  width: 44.3rem;
}
@media all and (max-width: 896px) {
  .visitEn {
    top: 5rem;
    left: 18.2rem;
    width: 18.9rem;
  }
}
.visitEn img {
  display: block;
  width: 100%;
}

.visitBlock {
  position: absolute;
  left: -8.9rem;
  width: 157.9rem;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .visitBlock {
    left: 2rem;
    width: 33.5rem;
    border-radius: 1rem;
  }
}
.visitBlock.b1 {
  top: 43.1rem;
  height: 76.4rem;
  background: #f5f5f5;
}
@media all and (max-width: 896px) {
  .visitBlock.b1 {
    top: 17.9rem;
    height: 166.5rem;
  }
}
.visitBlock.b2 {
  top: 131.4rem;
  height: 124.1rem;
  background: #f8fae3;
}
@media all and (max-width: 896px) {
  .visitBlock.b2 {
    top: 192.2rem;
    height: 164.5rem;
  }
}
@media all and (min-width: 897px) {
  .visitBlock.b2 .visitRibbon {
    top: -3.9rem;
  }
}

.visitRibbon {
  position: absolute;
  top: -4.3rem;
  left: 51.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54.7rem;
  height: 7.8rem;
  background-image: linear-gradient(to right, rgba(127, 205, 236, 0) 0%, #7fcdec 30.4%, #7fcdec 70%, rgba(127, 205, 236, 0) 100%);
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .visitRibbon {
    top: -2.8rem;
    left: 2rem;
    width: 29.5rem;
    height: 5.6rem;
    font-size: 2rem;
    line-height: 3rem;
  }
}

.visitFlow li {
  position: absolute;
  top: 8rem;
  width: 33rem;
  height: 51.1rem;
}
@media all and (max-width: 896px) {
  .visitFlow li {
    left: 2rem;
    width: 29.5rem;
  }
}
@media all and (min-width: 897px) {
  .visitFlow .f1 {
    left: 8.9rem;
  }
  .visitFlow .f2 {
    left: 44.5rem;
  }
  .visitFlow .f3 {
    left: 80.1rem;
  }
  .visitFlow .f4 {
    left: 115.7rem;
  }
}
@media all and (max-width: 896px) {
  .visitFlow .f1 {
    top: 5.7rem;
    height: 34.8rem;
  }
  .visitFlow .f2 {
    top: 42.5rem;
    height: 40.6rem;
  }
  .visitFlow .f3 {
    top: 85.1rem;
    height: 36.4rem;
  }
  .visitFlow .f4 {
    top: 123.5rem;
    height: 29.2rem;
  }
}
.visitFlow .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 33rem;
  height: 20.8rem;
  overflow: hidden;
  border-radius: 2rem 2rem 0 0;
}
@media all and (max-width: 896px) {
  .visitFlow .photo {
    width: 29.5rem;
    height: 13rem;
    border-radius: 1rem 1rem 0 0;
  }
}
.visitFlow .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visitFlow li::before {
  content: "";
  position: absolute;
  top: 20.6rem;
  left: 0;
  width: 33rem;
  height: 30.5rem;
  border-radius: 0 0 2rem 2rem;
  background: rgba(127, 205, 236, 0.15);
}
@media all and (max-width: 896px) {
  .visitFlow li::before {
    top: 13rem;
    width: 29.5rem;
    height: calc(100% - 13rem);
    border-radius: 0 0 1rem 1rem;
  }
}
.visitFlow .f2::before,
.visitFlow .f4::before {
  background: rgba(210, 219, 71, 0.25);
}
.visitFlow h4 {
  position: absolute;
  top: 23.6rem;
  left: 0;
  width: 100%;
  font-size: 2.6rem;
  line-height: 3.9rem;
  font-weight: 700;
  color: #5ba9d1;
  text-align: center;
}
@media all and (max-width: 896px) {
  .visitFlow h4 {
    top: 14.8rem;
    font-size: 2rem;
    line-height: 3rem;
  }
}
.visitFlow .body,
.visitFlow .body2 {
  position: absolute;
  left: 3.2rem;
  width: 26.8rem;
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: #505050;
}
@media all and (max-width: 896px) {
  .visitFlow .body,
  .visitFlow .body2 {
    left: 1.7rem;
    width: 26rem;
    font-size: 1.4rem;
    letter-spacing: -0.042rem;
  }
}
.visitFlow .body {
  top: 28.71rem;
}
@media all and (max-width: 896px) {
  .visitFlow .body {
    top: 18.76rem;
  }
}
.visitFlow {
  /* Figma実値：f3本文は約物半角、f4本文は字送り -0.02em */
}
@media all and (max-width: 896px) {
  .visitFlow .f3 .body {
    font-feature-settings: "halt" 1;
  }
}
@media all and (min-width: 897px) {
  .visitFlow .f4 .body {
    letter-spacing: -0.02em;
  }
}
@media all and (max-width: 896px) {
  .visitFlow .f3 .body {
    top: 18.76rem;
  }
}
.visitFlow .f3 .body2 {
  top: 41.81rem;
}
@media all and (max-width: 896px) {
  .visitFlow .f3 .body2 {
    top: 28.26rem;
  }
}
.visitFlow .label {
  position: absolute;
  top: 38.5rem;
  left: 3.5rem;
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .visitFlow .label {
    top: 25.5rem;
    left: 2rem;
  }
}
.visitFlow .label .mk {
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.7rem;
  background: #5ba9d1;
}

.visitEq li {
  position: absolute;
}
@media all and (max-width: 896px) {
  .visitEq li {
    left: 2rem;
    width: 29.5rem;
  }
}
.visitEq .photo {
  position: absolute;
  width: 54.9rem;
  height: 28rem;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .visitEq .photo {
    position: static;
    width: 29.5rem;
    height: 16rem;
    border-radius: 1rem;
  }
}
.visitEq .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visitEq .txt {
  position: absolute;
  width: 68.2rem;
}
@media all and (max-width: 896px) {
  .visitEq .txt {
    position: static;
    width: 29.5rem;
    margin-top: 1.4rem;
  }
}
.visitEq h4 {
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #5ba9d1;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .visitEq h4 {
    display: block;
    font-size: 2.2rem;
    line-height: 3.3rem;
    text-align: center;
  }
}
.visitEq h4::after {
  content: "";
  flex: 1 1 auto;
  height: 0.1rem;
  margin-left: 1.7rem;
  background-image: linear-gradient(to right, #505050 0, #505050 0.1rem, transparent 0.1rem, transparent 0.4rem);
  background-repeat: repeat-x;
  background-size: 0.4rem 0.1rem;
  background-position: left bottom;
}
@media all and (max-width: 896px) {
  .visitEq h4::after {
    display: none;
  }
}
.visitEq .body {
  margin-top: 2.2rem;
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: #505050;
  text-align: justify;
}
@media all and (max-width: 896px) {
  .visitEq .body {
    margin-top: 1.4rem;
    font-size: 1.4rem;
    /* FigmaはSPの本文に約物半角（halt）が掛かっている */
    font-feature-settings: "halt" 1;
  }
}
.visitEq .body + .body {
  margin-top: 1rem;
}
@media all and (min-width: 897px) {
  .visitEq .e1 .photo {
    top: 13.4rem;
    left: 13.6rem;
  }
  .visitEq .e1 .txt {
    top: 15.4rem;
    left: 75.7rem;
  }
  .visitEq .e2 .photo {
    top: 44.2rem;
    left: 89rem;
  }
  .visitEq .e2 .txt {
    top: 47.7rem;
    left: 13.6rem;
  }
  .visitEq .e3 .photo {
    top: 77rem;
    left: 13.6rem;
  }
  .visitEq .e3 .txt {
    top: 82.1rem;
    left: 75.7rem;
  }
}
@media all and (max-width: 896px) {
  .visitEq .e1 {
    top: 5.8rem;
  }
  .visitEq .e2 {
    top: 58.2rem;
  }
  .visitEq .e3 {
    top: 107.9rem;
  }
}

.visitBtn {
  position: absolute;
  left: 62.2rem;
}
@media all and (max-width: 896px) {
  .visitBtn {
    left: 2rem;
  }
}
.visitBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.5rem;
  height: 7.2rem;
  border-radius: 4.05rem;
  background: #a5d423;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .visitBtn a {
    width: 29.5rem;
    height: 6.4rem;
  }
}
.visitBtn .arrow {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 5.2rem;
  border-radius: 50%;
  background: #fff;
}
@media all and (max-width: 896px) {
  .visitBtn .arrow {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 4rem;
  }
}
.visitBtn .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #a5d423;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .visitBtn .arrow::after {
    left: 0.7rem;
    top: 0.55rem;
    border-left-width: 0.5rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
.visitBtn.v1 {
  top: 64.1rem;
}
@media all and (max-width: 896px) {
  .visitBtn.v1 {
    top: 156.1rem;
    left: 2rem;
  }
}
.visitBtn.v2 {
  top: 111rem;
}
@media all and (max-width: 896px) {
  .visitBtn.v2 {
    top: 154.1rem;
    left: 2rem;
  }
}
.visitBtn.v3 {
  top: auto;
  bottom: 8rem;
  left: 50%;
  width: 33.5rem;
  margin-left: -16.75rem;
}
@media all and (max-width: 896px) {
  .visitBtn.v3 {
    bottom: 3.4rem;
    left: 50%;
    width: 29.5rem;
    margin-left: -14.75rem;
  }
}
@media (hover: hover) {
  .visitBtn a:hover {
    opacity: 0.8;
  }
}

.visitAccess {
  position: absolute;
  top: 264.5rem;
  left: 0;
  width: 140rem;
}
@media all and (max-width: 896px) {
  .visitAccess {
    top: 362.7rem;
    width: 100%;
  }
}

.acTtl {
  position: absolute;
  top: 0;
  left: 59.5rem;
  width: 20.8rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  .acTtl {
    left: 8.4rem;
  }
}
.acTtl .en {
  display: block;
  height: 6.2rem;
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: 5.6rem;
  line-height: 6.61rem;
  letter-spacing: 0.28rem;
  color: #5ba9d1;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  .acTtl .en {
    letter-spacing: 0.1rem;
  }
}
.acTtl .ja {
  display: block;
  height: 2.7rem;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #505050;
}

.acRoute {
  position: absolute;
  top: 13.6rem;
  width: 66.8rem;
  height: 58rem;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .acRoute {
    width: 33.5rem;
    border-radius: 1rem;
  }
}
.acRoute::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9rem;
  border-radius: 2rem 2rem 0 0;
}
@media all and (max-width: 896px) {
  .acRoute::before {
    height: 8rem;
    border-radius: 1rem 1rem 0 0;
  }
}
.acRoute.r1 {
  left: -8.9rem;
  width: 157.9rem;
  background: rgba(127, 205, 236, 0.2);
}
.acRoute.r1::before {
  background: #c4e7f5;
}
@media all and (max-width: 896px) {
  .acRoute.r1 {
    top: 11.2rem;
    left: 2rem;
    width: 33.5rem;
    height: 69rem;
  }
}

.acHead {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  font-size: 2.5rem;
  line-height: 3.75rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  color: #5ba9d1;
  text-align: center;
}
@media all and (max-width: 896px) {
  .acHead {
    top: 1.4rem;
    line-height: 2.65rem;
  }
}
.acHead em {
  font-style: normal;
  font-size: 3.2rem;
}
@media all and (max-width: 896px) {
  .acHead em {
    font-size: 2rem;
  }
}
.acHead small {
  font-size: 1.6rem;
}
.acHead small.rainy {
  font-size: 2.1rem;
}
@media all and (max-width: 896px) {
  .acHead small.rainy {
    font-size: 1.6rem;
  }
}

.acSub {
  position: absolute;
  top: 12rem;
  left: 0;
  width: 100%;
  font-size: 2.1rem;
  line-height: 3.15rem;
  font-weight: 700;
  letter-spacing: 0.105rem;
  color: #505050;
  text-align: center;
}
@media all and (max-width: 896px) {
  .acSub {
    top: 9rem;
    left: 2.1rem;
    width: 29.6rem;
    font-size: 1.5rem;
    line-height: 2.3rem;
    letter-spacing: -0.045rem;
  }
}
.acSub small {
  font-size: 1.6rem;
}
@media all and (max-width: 896px) {
  .acSub small {
    font-size: 1.2rem;
  }
}

.acStep {
  position: absolute;
  top: 12.5rem;
  left: 8rem;
  right: 8rem;
}
@media all and (max-width: 896px) {
  .acStep {
    top: 11rem;
    left: 2rem;
    right: auto;
  }
}
@media all and (min-width: 897px) {
  .acStep {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 1fr 1fr;
    column-gap: 6rem;
  }
}
.acStep::before {
  content: "";
  position: absolute;
  top: 2.7rem;
  left: 2.9rem;
  width: 0.1rem;
  background: currentColor;
}
@media all and (min-width: 897px) {
  .acStep::before {
    content: none;
  }
}
@media all and (max-width: 896px) {
  .acStep::before {
    height: 32rem;
  }
}
.r1 .acStep {
  color: #7fcdec;
}
.acStep li {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.acStep li + li {
  margin-top: 2.6rem;
}
@media all and (min-width: 897px) {
  .acStep li:nth-child(4) {
    margin-top: 0;
  }
  .acStep li::after {
    content: "";
    position: absolute;
    top: 2.9rem;
    left: 2.9rem;
    width: 0.1rem;
    bottom: -2.6rem;
    background: currentColor;
  }
  .acStep li:nth-child(3)::after, .acStep li:nth-child(6)::after {
    content: none;
  }
}
@media all and (max-width: 896px) {
  .acStep li + li {
    margin-top: 1.65rem;
  }
}
.acStep .no {
  position: relative;
  z-index: 1;
  flex: 0 0 5.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 50%;
  background: #7fcdec;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 2.94rem;
  line-height: 1;
  color: #fff;
  /* SPは番号の高さが本文より大きく行送りを崩すため、フローから外す */
}
@media all and (max-width: 896px) {
  .acStep .no {
    position: absolute;
    top: 0;
    left: 0;
    width: 4.4rem;
    height: 4.4rem;
    font-size: 2.2rem;
  }
}
.acStep .tx {
  margin: 0.2rem 0 0 2.1rem;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #505050;
}
.acStep .tx small {
  font-size: 1.3rem;
}
@media all and (max-width: 896px) {
  .acStep .tx {
    margin: 0 0 0 5.6rem;
    font-size: 1.3rem;
    line-height: 1.95rem;
    letter-spacing: 0;
  }
  .acStep .tx small {
    font-size: 1.1rem;
  }
}

/*------------------------------------------------------------
	recruit
------------------------------------------------------------*/
.recruit {
  position: relative;
  overflow: hidden;
  height: 77.5rem;
}
@media all and (max-width: 896px) {
  .recruit {
    height: 66.5rem;
  }
}
.recruit::before {
  content: "";
  position: absolute;
  top: 37.3rem;
  left: 0;
  width: 100%;
  height: 40rem;
  background: linear-gradient(90deg, #d2db47 0%, #7fcdec 100%);
}
@media all and (max-width: 896px) {
  .recruit::before {
    top: 2.6rem;
    height: 64rem;
  }
}

.recruitPhoto {
  position: absolute;
  top: 0;
  left: calc(50% - 96rem);
  width: 192rem;
  height: 46.6rem;
}
@media all and (max-width: 896px) {
  .recruitPhoto {
    left: 0;
    width: 100%;
    height: 35.5rem;
  }
}
.recruitPhoto li {
  position: absolute;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .recruitPhoto li {
    border-radius: 1rem;
  }
}
.recruitPhoto li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media all and (min-width: 897px) {
  .recruitPhoto .r01 {
    top: 0;
    left: 4rem;
    width: 50rem;
    height: 46.6rem;
  }
  .recruitPhoto .r02 {
    top: 0;
    left: 56.7rem;
    width: 38rem;
    height: 22rem;
  }
  .recruitPhoto .r03 {
    top: 24.6rem;
    left: 56.7rem;
    width: 38rem;
    height: 22rem;
  }
  .recruitPhoto .r04 {
    top: 0;
    left: 97.4rem;
    width: 50rem;
    height: 46.6rem;
  }
  .recruitPhoto .r05 {
    top: 0;
    left: 150.1rem;
    width: 38rem;
    height: 22rem;
  }
  .recruitPhoto .r06 {
    top: 24.6rem;
    left: 150.1rem;
    width: 38rem;
    height: 22rem;
  }
}
@media all and (max-width: 896px) {
  .recruitPhoto .r01 {
    top: 0;
    left: 2rem;
    width: 18.5rem;
    height: 17.2rem;
  }
  .recruitPhoto .r02 {
    top: 0;
    left: 21.5rem;
    width: 14rem;
    height: 8.1rem;
  }
  .recruitPhoto .r03 {
    top: 9.1rem;
    left: 21.5rem;
    width: 14rem;
    height: 8.1rem;
  }
  .recruitPhoto .r04 {
    top: 18.3rem;
    left: 2rem;
    width: 18.5rem;
    height: 17.2rem;
  }
  .recruitPhoto .r05 {
    top: 18.3rem;
    left: 21.5rem;
    width: 14rem;
    height: 8.1rem;
  }
  .recruitPhoto .r06 {
    top: 27.4rem;
    left: 21.5rem;
    width: 14rem;
    height: 8.1rem;
  }
}

.recruitInner {
  position: relative;
  z-index: 1;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .recruitInner {
    width: 100%;
  }
}

.recruitEn {
  position: absolute;
  top: 41.3rem;
  left: -18.5rem;
  width: 33.4rem;
}
@media all and (max-width: 896px) {
  .recruitEn {
    top: 33.1rem;
    left: 2rem;
    width: 14.2rem;
  }
}
.recruitEn img {
  display: block;
  width: 100%;
}

.recruitTtl {
  position: absolute;
  top: 54.9rem;
  left: 5rem;
  font-size: 3.9rem;
  line-height: 5.85rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .recruitTtl {
    top: 37.4rem;
    left: 0;
    width: 100%;
    font-size: 2.8rem;
    line-height: 4.2rem;
    text-align: center;
  }
}

.recruitBody {
  position: absolute;
  top: 55.2rem;
  left: 25.2rem;
  width: 66rem;
  padding-left: 4.6rem;
  border-left: 0.1rem solid rgba(91, 169, 209, 0.5);
  font-size: 1.8rem;
  line-height: 4rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .recruitBody {
    top: 42.5rem;
    left: 2rem;
    width: 33.5rem;
    padding-left: 0;
    border-left: 0;
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
}

.recruitBtn {
  position: absolute;
  top: 55.2rem;
  left: 101.5rem;
}
@media all and (max-width: 896px) {
  .recruitBtn {
    top: 55.4rem;
    left: 2rem;
  }
}
.recruitBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.5rem;
  height: 7.2rem;
  border-radius: 4.05rem;
  background: #a5d423;
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .recruitBtn a {
    height: 6.4rem;
  }
}
.recruitBtn .arrow {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 6.2rem;
  border-radius: 50%;
  background: #fff;
}
@media all and (max-width: 896px) {
  .recruitBtn .arrow {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 6.7rem;
  }
}
.recruitBtn .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #a5d423;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .recruitBtn .arrow::after {
    left: 0.7rem;
    top: 0.55rem;
    border-left-width: 0.5rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
@media (hover: hover) {
  .recruitBtn a:hover {
    opacity: 0.8;
  }
}

/*------------------------------------------------------------
	group
------------------------------------------------------------*/
.group {
  position: relative;
  overflow: hidden;
  height: 220.3rem;
}
@media all and (max-width: 896px) {
  .group {
    height: 218.5rem;
  }
}

.groupInner {
  position: relative;
  width: 140rem;
  height: 100%;
  margin: 0 auto;
}
@media all and (max-width: 896px) {
  .groupInner {
    width: 100%;
  }
}

.groupTtl {
  position: absolute;
  top: 14.8rem;
  left: 5.2rem;
  width: 129.6rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  .groupTtl {
    top: 6.1rem;
    left: 5.2rem;
    width: 27.1rem;
  }
}
.groupTtl .sub {
  display: block;
  height: 3.6rem;
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 700;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .groupTtl .sub {
    height: 3rem;
    font-size: 2rem;
    line-height: 3rem;
  }
}
.groupTtl .main {
  display: block;
  font-family: "Zen Maru Gothic", "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 5.4rem;
  line-height: 8.1rem;
  letter-spacing: -0.033rem;
  color: #505050;
  white-space: nowrap;
  margin-top: -0.2rem;
}
@media all and (max-width: 896px) {
  .groupTtl .main {
    margin-top: 0.4rem;
    font-size: 4rem;
    line-height: 6rem;
    letter-spacing: -0.15rem;
  }
}
.groupTtl .main a {
  color: inherit;
  text-decoration: none;
}
.groupTtl::before, .groupTtl::after {
  content: "";
  position: absolute;
  top: 7.5rem;
  width: 41rem;
  height: 0.1rem;
  background-image: linear-gradient(to right, #505050 0, #505050 0.1rem, transparent 0.1rem, transparent 0.4rem);
  background-repeat: repeat-x;
  background-size: 0.4rem 0.1rem;
  background-position: left bottom;
}
@media all and (max-width: 896px) {
  .groupTtl::before, .groupTtl::after {
    display: none;
  }
}
.groupTtl::before {
  left: 0;
}
.groupTtl::after {
  left: 88.7rem;
  width: 41.4rem;
}

.groupList li {
  position: absolute;
  left: 5rem;
  width: 130rem;
  height: 36.6rem;
  border-radius: 2rem;
  background: #ecf8fc;
}
@media all and (max-width: 896px) {
  .groupList li {
    left: 2.1rem;
    width: 33.4rem;
    height: 39.7rem;
    border-radius: 1rem;
  }
}
.groupList .g01 {
  top: 31.3rem;
}
@media all and (max-width: 896px) {
  .groupList .g01 {
    top: 17.3rem;
  }
}
.groupList .g02 {
  top: 71.9rem;
}
@media all and (max-width: 896px) {
  .groupList .g02 {
    top: 59rem;
  }
}
.groupList .g03 {
  top: 112.5rem;
}
@media all and (max-width: 896px) {
  .groupList .g03 {
    top: 100.7rem;
  }
}
.groupList .gHead {
  position: absolute;
  top: 4.8rem;
  left: 0;
  display: flex;
  align-items: center;
  width: 54.8rem;
  height: 6.8rem;
  padding-left: 10rem;
  background-image: linear-gradient(to right, #fff 0%, #fff 65.6%, rgba(255, 255, 255, 0) 100%);
}
.groupList .gHead a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
@media all and (max-width: 896px) {
  .groupList .gHead {
    top: 2.4rem;
    width: 33.4rem;
    height: 5.6rem;
    padding-left: 1.9rem;
  }
}
.groupList .gHead .nm {
  font-size: 2.6rem;
  line-height: 3.9rem;
  font-weight: 700;
  color: #505050;
}
@media all and (max-width: 896px) {
  .groupList .gHead .nm {
    font-size: 2rem;
    line-height: 3rem;
  }
}
.groupList .gHead .sb {
  margin-left: 0.7rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: #5ba9d1;
}
@media all and (max-width: 896px) {
  .groupList .gHead .sb {
    margin-left: 0.2rem;
    font-size: 1.3rem;
    line-height: 1.95rem;
  }
}
.groupList .gHead .arrow {
  position: absolute;
  top: 2.1rem;
  left: 48.3rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #7fcdec;
}
@media all and (max-width: 896px) {
  .groupList .gHead .arrow {
    top: 1.7rem;
    left: 29.4rem;
    width: 2rem;
    height: 2rem;
  }
}
.groupList .gHead .arrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  border-left: 0.7rem solid #fff;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
@media all and (max-width: 896px) {
  .groupList .gHead .arrow::after {
    left: 0.7rem;
    top: 0.65rem;
    border-left-width: 0.6rem;
    border-top-width: 0.35rem;
    border-bottom-width: 0.35rem;
  }
}
.groupList .gPhoto {
  position: absolute;
  top: 5rem;
  left: 60.5rem;
  width: 59.5rem;
  height: 26.6rem;
  overflow: hidden;
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  .groupList .gPhoto {
    top: 9.2rem;
    left: 1.9rem;
    width: 29.5rem;
    height: 13.2rem;
    border-radius: 1rem;
  }
}
.groupList .gPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.groupList .gAddress {
  position: absolute;
  top: 14.3rem;
  left: 10.3rem;
  font-size: 1.8rem;
  line-height: 3.6rem;
  font-weight: 500;
  color: #505050;
}
@media all and (max-width: 896px) {
  .groupList .gAddress {
    top: 23.6rem;
    left: 0;
    width: 100%;
    font-size: 1.6rem;
    line-height: 2.6rem;
    text-align: center;
  }
}
.groupList .gTel {
  position: absolute;
  top: 25.8rem;
  left: 10rem;
}
@media all and (max-width: 896px) {
  .groupList .gTel {
    top: 32rem;
    left: 5.3rem;
  }
}
.groupList .gTel a {
  display: flex;
  align-items: center;
}
.groupList .gTel .icon {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  margin-right: 1.1rem;
}
@media all and (max-width: 896px) {
  .groupList .gTel .icon {
    flex-basis: 3.5rem;
    width: 3.5rem;
    margin-right: 0.2rem;
  }
}
.groupList .gTel .icon img {
  display: block;
  width: 100%;
}
.groupList .gTel .num {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 4rem;
  line-height: 5.93rem;
  letter-spacing: 0.16rem;
  color: #686868;
}
@media all and (max-width: 896px) {
  .groupList .gTel .num {
    font-size: 3.2rem;
    line-height: 4.74rem;
    letter-spacing: 0.128rem;
  }
}

.group .clinicInner {
  position: absolute;
  top: 158.4rem;
  left: 0;
  width: 140rem;
  height: 40.2rem;
  margin: 0;
}
@media all and (max-width: 896px) {
  .group .clinicInner {
    top: 141.3rem;
    width: 100%;
    height: 66.9rem;
  }
}

/*------------------------------------------------------------
	タブ切り替え時のフェードイン
------------------------------------------------------------*/
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.treatPanel:not([hidden]),
.caseList > li:not([hidden]) {
  animation: tabFadeIn 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .treatPanel:not([hidden]),
  .caseList > li:not([hidden]) {
    animation: none;
  }
}

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