@charset "UTF-8";

/* =========================
  obesity-treatment common
========================= */

.obesity-treatment {
  color: #333333;
}

.obesity-treatment img {
  max-width: 100%;
  height: auto;
}

.obesity-treatment .l-section:last-of-type {
  padding-bottom: 0;
}

.obesity-treatment .c-section-heading {
  margin-bottom: 60px;
}

/* =========================
  main visual
========================= */

.main-visual {
  width: 100%;
  height: 425px;
  overflow: hidden;
  background-color: #d9d9d9;
}

.main-visual__image {
  width: 100%;
  height: 100%;
  background-color: #d9d9d9;
}

/* =========================
  breadcrumb
========================= */

.breadcrumb {
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-bottom: 72px;
  font-size: 12px;
  color: #999999;
}

.breadcrumb span {
  width: 16px;
  height: 1px;
  background-color: #cccccc;
}

.breadcrumb a,
.breadcrumb p {
  margin: 0;
  color: #999999;
  text-decoration: none;
}

/* =========================
  treatment
========================= */

.treatment {
  display: flex;
  align-items: center;
  column-gap: 50px;
}

.treatment__text {
  width: calc(50% - 50px);
}

.treatment__heading {
  font-size: 32px;
  line-height: 1.7;
  font-weight: 500;
}

.treatment__read {
  line-height: 2;
  margin-top: 28px;
  font-weight: 500;
}

.treatment__read + .treatment__read {
  margin-top: 34px;
}

.treatment__img-wrap {
  width: 50%;
  border-radius: 20px;
  overflow: hidden;
  background-color: #d9d9d9;
}

.treatment__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* =========================
  why
========================= */

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

.why-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
  background-color: #ffffff;
  border-radius: 32px;
  padding: 50px;
}

.why-card__body {
  flex: 1;
  min-width: 0;
}

.why-card__head {
  display: flex;
  align-items: flex-start;
  column-gap: 20px;
  margin-bottom: 30px;
}

.why-card__num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #004097;
  color: #ffffff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}

.why-card__num--blue {
  background-color: #049fcf;
}

.why-card__heading {
  color: #004097;
  font-size: 22px;
  line-height: 1.7;
  font-weight: 600;
}

.why-card__text {
  line-height: 2;
  font-weight: 500;
}

.why-card__img-wrap {
  width: 150px;
  flex-shrink: 0;
}

.why-card__img {
  width: 100%;
  height: auto;
}

.why-card:nth-child(2) .why-card__img {
  transform: scale(0.8);
}

.why__message {
  background-color: #ffffff;
  border-radius: 32px;
  padding: 40px 55px;
  text-align: center;
  margin-top: 40px;
  font-weight: 500;
}

.why__message p {
  line-height: 2;
}

/* =========================
  obesity-treatment about
========================= */

.zepbound-about-section {
  background-color: #ffffff;
}

.zepbound-about {
  text-align: center;
}

.zepbound-about__read {
  line-height: 2;
  font-weight: 500;
}

.zepbound-about__list {
  display: flex;
  justify-content: center;
  column-gap: 100px;
  margin-top: 65px;
}

.zepbound-about__item {
  width: 260px;
  text-align: center;
}

.zepbound-about__item img {
  height: 170px;
  object-fit: contain;
}

.zepbound-about__item h3 {
  color: #004097;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
  margin-top: 24px;
}

.zepbound-about__item p {
  line-height: 1.9;
  margin-top: 16px;
  font-weight: 500;
}

/* =========================
  difference
========================= */

.difference {
  display: flex;
  align-items: center;
  column-gap: 40px;
  background-color: #EAEEF4;
  border-radius: 20px;
  padding: 50px;
}

.difference__text {
  flex: 1;
}

.difference__heading {
  color: #004097;
  font-size: 26px;
  line-height: 1.7;
  font-weight: 600;
}

.difference__read {
  line-height: 2;
  margin-top: 20px;
  font-weight: 500;
}

.difference__read:last-child {
  font-weight: 600;
}

.difference__cards {
  display: flex;
  align-items: center;
  column-gap: 15px;
}

.difference-card {
  width: 230px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
}

.difference-card__label {
  display: inline-block;
  background-color: #004097;
  color: #ffffff;
  border-radius: 20px;
  padding: 6px 18px;
  font-weight: 600;
}

.difference-card img {
  height: 70px;
  object-fit: contain;
  margin-top: 18px;
}

.difference-card p:not(.difference-card__label) {
  line-height: 1.7;
  margin-top: 18px;
  text-align: left;
  font-weight: 500;
}

.difference__mark {
  color: #004097;
  font-size: 54px;
  font-weight: 600;
}

/* =========================
  caution
========================= */

.caution-box {
  display: flex;
  align-items: center;
  column-gap: 35px;
  background-color: #ffffff;
  border: 4px solid #eeeeee;
  border-radius: 20px;
  padding: 30px 40px;
  margin: 35px auto 80px;
}

.caution-box__img {
  width: 90px;
  flex-shrink: 0;
}

.caution-box__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.caution-box__list li {
  position: relative;
  padding-left: 1em;
  line-height: 1.9;
  font-weight: 400;
}

.caution-box__list li::before {
  content: "•";
  position: absolute;
  left: 0;

  color: #333333;
  font-size: 1rem;
}

/* =========================
  obesity
========================= */

.obesity {
  display: flex;
  align-items: center;
  column-gap: 50px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 50px 60px;
}

.obesity__img-wrap {
  width: 150px;
  flex-shrink: 0;
}

.obesity__img {
  width: 100%;
  height: auto;
  transform: scaleX(-1);
}

.obesity__text {
  flex: 1;
  font-weight: 500;
}

.obesity__heading {
  color: #004097;
  font-size: 26px;
  line-height: 1.7;
  font-weight: 600;
}

.obesity__read {
  line-height: 1.5;
  margin-top: 20px;
}

/* =========================
  treatment flow
========================= */

.treatment-flow__list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 20px;
}

.treatment-flow__item {
  width: 22%;
  text-align: center;
}

.treatment-flow__item:first-child .treatment-flow__circle img {
  transform: scaleX(-1);
}

.treatment-flow__circle {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background-color: #EAEEF4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.treatment-flow__circle img {
  max-width: 140px;
  max-height: 130px;
  object-fit: contain;
}


.treatment-flow__num {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #004097;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}

.treatment-flow__num--blue {
  background-color: #049fcf;
}

.treatment-flow__heading {
  color: #004097;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
}

.treatment-flow__text {
  line-height: 1.9;
  margin-top: 14px;
  font-weight: 500;
}

.treatment-flow__dots {
  display: flex;
  align-items: center;
  column-gap: 4px;
  margin-top: 88px;
  flex-shrink: 0;
}

.treatment-flow__dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #004097;
  display: block;
}

.treatment-flow__dots .is-large {
  width: 8px;
  height: 8px;
}

.treatment-flow__note {
  border: 4px solid #dddddd;
  border-radius: 30px;
  background-color: #ffffff;
  padding: 18px 30px;
  text-align: center;
  line-height: 1.8;
  margin-top: 60px;
}

/* =========================
  price
========================= */

.price-section {
  padding-top: 0;
  padding-bottom: 120px;
}

.price-section .c-section-heading {
  margin-bottom: 60px;
}

.price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 90px;
}

.price__main {
  flex: 1;
  max-width: 760px;
}

.price__fee-list {
  display: flex;
  column-gap: 22px;
  margin-bottom: 42px;
}

.price__fee-box {
  width: calc(50% - 11px);
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px 20px 20px;
  text-align: center;
}

.price__fee-label {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
}

.price__fee-number {
  color: #004097;
  font-size: 32px;
  line-height: 1.4;
  font-weight: 700;
  margin-top: 8px;
}

.price__fee-number span {
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  margin-left: 6px;
}

.price__medicine-heading {
  color: #004097;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 700;
  text-align: center;
  margin-bottom: 18px;
}

.price__medicine-heading span {
  color: #333333;
  font-size: 18px;
  font-weight: 500;
}

.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.price-table tr {
  background-color: #ffffff;
}

.price-table tr:nth-child(even) {
  background-color: #EAEEF4;
}

.price-table th,
.price-table td {
  padding: 14px 18px;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
}

.price-table th {
  width: 38%;
}

.price-table td:nth-child(2) {
  width: 40%;
}

.price-table td:last-child {
  width: 22%;
  text-align: right;
}

.price__note {
  line-height: 1.8;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 500;
}

.price__contact {
  width: 360px;
  text-align: center;
  flex-shrink: 0;
}

.price__contact-img {
  width: 180px;
  height: auto;
}

.price__contact-text {
  font-size: 21px;
  line-height: 1.8;
  font-weight: 500;
  margin-top: 42px;
}

.price__contact-button {
  width: 340px;
  max-width: 100%;
  height: 78px;
  margin: 36px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #33b56d, #48aecf);
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 15px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.price__contact-button span {
  font-size: 28px;
  line-height: 1;
}

/* =========================
  1170px
========================= */

@media screen and (max-width: 1170px) and (min-width: 981px) {
  .treatment-flow__list {
    column-gap: 12px;
  }

  .treatment-flow__item {
    width: 21%;
  }

  .treatment-flow__circle {
    width: 180px;
    height: 180px;
  }

  .treatment-flow__circle img {
    max-width: 115px;
    max-height: 110px;
  }

  .treatment-flow__num {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .treatment-flow__dots {
    column-gap: 3px;
    margin-top: 78px;
  }

  .price {
    column-gap: 40px;
  }

  .price__contact {
    width: 300px;
  }

  .price__contact-img {
    width: 150px;
  }

  .price__contact-text {
    font-size: 18px;
    margin-top: 30px;
  }

  .price__contact-button {
    width: 280px;
    height: 68px;
    font-size: 18px;
    column-gap: 20px;
  }
}

/* =========================
  1140px
========================= */

@media screen and (max-width: 1140px) {
  .why-card {
    padding: 36px 24px;
    column-gap: 18px;
  }

  .why-card__heading {
    font-size: 18px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .why-card__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .why-card__img-wrap {
    width: 90px;
  }
}

/* =========================
  980px
========================= */

@media screen and (max-width: 980px) {

  /* treatment flow */
  .treatment-flow__list {
    position: relative;
    flex-direction: column;
    align-items: center;
    row-gap: 38px;
  }

  .treatment-flow__list::before {
    content: "";
    position: absolute;
    top: 180px;
    bottom: 180px;
    left: 90px;
    width: 8px;
    transform: translateX(-50%);
    background-image: radial-gradient(circle, #004097 3px, transparent 3px);
    background-size: 8px 8px;
    background-repeat: repeat-y;
    background-position: center;
    z-index: 1;
  }

  .treatment-flow__item {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 760px;
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-areas:
      "circle heading"
      "circle text";
    column-gap: 30px;
    align-items: center;
    text-align: left;
  }
	

  .treatment-flow__circle {
    grid-area: circle;
    position: relative;
    z-index: 2;
    width: 180px;
    height: 180px;
    margin: 0;
  }

  .treatment-flow__heading {
    grid-area: heading;
    font-size: 22px;
    line-height: 1.6;
    margin: 0 0 12px;
  }

  .treatment-flow__text {
    grid-area: text;
    margin: 0;
    line-height: 1.9;
  }

  .treatment-flow__dots,
  .treatment-flow__item::after {
    display: none;
  }

  /* difference */
  .difference {
    flex-direction: column;
    align-items: stretch;
    row-gap: 40px;
    padding: 40px 30px;
  }
	
	.difference__heading{
	text-align: center;
  }

  .difference__cards {
    flex-direction: column;
    justify-content: center;
    row-gap: 28px;
  }

  .difference-card {
    width: 100%;
    max-width: 620px;
    height: auto;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-areas:
      "img label"
      "img text";
    column-gap: 28px;
    align-items: center;
    text-align: left;
  }

  .difference-card__label {
    grid-area: label;
    width: fit-content;
    margin: 0 0 12px;
  }

  .difference-card img {
    grid-area: img;
    height: 90px;
    margin: 0 auto;
  }

  .difference-card p:not(.difference-card__label) {
    grid-area: text;
    margin: 0;
    line-height: 1.8;
  }

  .difference__mark {
    font-size: 46px;
    line-height: 1;
  }

  /* price */
  .price {
    flex-direction: column;
    row-gap: 60px;
  }

  .price__main {
    width: 100%;
    max-width: none;
  }

  .price__contact {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}
/* =========================
  960px
========================= */

@media screen and (max-width: 960px) {
	
  .obesity-treatment .c-section-heading {
    margin-bottom: 50px;
  }
 　 margin-top: 0;
　}

  .treatment {
    gap: 30px;
  }

  .treatment__text {
    width: calc(50% - 30px);
  }

  .treatment__heading {
    font-size: 26px;
    line-height: 1.5;
  }

  .treatment__read {
    line-height: 1.8;
    margin-top: 26px;
  }

  .treatment__read + .treatment__read {
    margin-top: 16px;
  }

  .zepbound-about__list {
    column-gap: 40px;
  }

  .obesity {
    column-gap: 30px;
    padding: 40px;
  }

  .obesity__heading {
    font-size: 24px;
  }

  .price-table th,
  .price-table td {
    font-size: 18px;
  }
}

/* =========================
  820px
========================= */
@media screen and (max-width: 820px) {

  .why__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

}

/* =========================
  800px
========================= */

@media screen and (min-width: 801px) and (max-width: 980px) {
  .treatment-flow__item {
    max-width: 760px;
    grid-template-columns: 180px 1fr;
    column-gap: 30px;
  }

  .treatment-flow__circle {
    width: 180px;
    height: 180px;
  }
  .treatment-flow__dots {
    display: none;
  }

  .treatment-flow__circle {
    position: relative;
    z-index: 2;
  }

  .treatment-flow__item:not(:last-child) .treatment-flow__circle::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 94%;
    margin-top: 10px;
    width: 8px;
    height: 60px;
    background-image: radial-gradient(circle, #004097 3px, transparent 3px);
    background-size: 8px 8px;
    background-repeat: repeat-y;
    background-position: center;

  }
	
	 .treatment-flow__list::before {
	display:none;
  }
}

/* =========================
  768px
========================= */

@media screen and (max-width: 768px) {
  .obesity-treatment .c-section-heading {
    margin-bottom: 40px;
  }

  .main-visual {
    height: 260px;
  }

  .breadcrumb {
    flex-wrap: wrap;
    margin-bottom: 45px;
  }

  .treatment {
    flex-direction: column;
    margin: 0;
  }

  .treatment__text,
  .treatment__img-wrap {
    width: 100%;
  }

  .why__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .why-card {
    padding: 30px 170px 25px 25px;
	position: relative;
  }

  .why-card__head {
    column-gap: 16px;
  }

  .why-card__num {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }

  .why-card__heading {
    font-size: 20px;
  }
	
  .why-card:nth-child(2) .why-card__img {
    width: 80%;
    margin: 0 auto;
    display: block;
  }

  .why-card__img-wrap {
    width: 130px;
    margin: 0;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
  }
	
  .why-card__img {
    width: 100%;
    height: auto;
  }

  .why-card:nth-child(2) .why-card__img {
    width: 80%;
    margin: 0 auto;
    display: block;
  }

  .why__message {
    padding: 30px 25px;
    text-align: left;
  }

  .zepbound-about__read {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .zepbound-about__list {
    flex-direction: column;
    align-items: center;
    row-gap: 60px;
  }

  .zepbound-about__item {
    width: 100%;
    max-width: 300px;
  }

  .caution-box {
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    padding: 28px 22px;
    margin-bottom: 60px;
  }


  .price-section {
    padding-bottom: 80px;
  }

  .price-section .c-section-heading {
    margin-bottom: 55px;
  }

  .price {
    align-items: stretch;
    row-gap: 55px;
  }

  .price__fee-list {
    flex-direction: column;
    row-gap: 16px;
    margin-bottom: 36px;
  }

  .price__fee-box {
    width: 100%;
  }

  .price__medicine-heading {
    font-size: 20px;
  }

  .price__medicine-heading span {
    display: block;
    font-size: 14px;
  }

  .price__note {
    font-size: 13px;
  }

  .price__contact {
    width: 100%;
  }

  .price__contact-img {
    width: 150px;
  }

  .price__contact-text {
    font-size: 17px;
    margin-top: 28px;
  }

  .price__contact-button {
    width: 100%;
    height: 64px;
    font-size: 16px;
    column-gap: 20px;
  }
}


/* =========================
  600px
========================= */

@media screen and (max-width: 600px) {

  .price-table tr {
    display: table-row;
  }

  .price-table th,
  .price-table td {
    display: table-cell;
    white-space: nowrap;
  }

}

/* =========================
  560px
========================= */

@media screen and (max-width: 560px) {
  .difference-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px;
  }

  .difference-card__label {
    margin-bottom: 18px;
  }

  .difference-card img {
    height: 82px;
    margin-bottom: 18px;
  }

  .difference-card p:not(.difference-card__label) {
    text-align: center;
    line-height: 1.9;
  }
	
	.l-section:first-of-type{
		padding-top: 0;
	}
	
	.why-card__head{
		margin-bottom:15px;
	}
	
	.zepbound-about__list {
		margin-top: 40px;
	}
	
  .obesity {
    flex-direction: column;
    padding: 35px 25px;
    text-align: center;
  }

  .obesity__img-wrap {
    width: 120px;
  }

  .obesity__text {
    margin-top: 24px;
    text-align: left;
  }

  .obesity__heading {
    text-align: center;
    font-size: 24px;
  }

}
	
/* =========================
  530px
========================= */	
@media screen and (max-width: 530px) {

  .price-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* 1列目 */
  .price-table th {
    width: auto;
  }

  /* 2列目（mg） */
  .price-table td:first-of-type {
    width: auto;
  }

  /* 3列目（価格） */
  .price-table td:last-of-type {
    width: 100%;
    margin-top: 6px;
  }

}


/* =========================
  450px
========================= */

@media screen and (max-width: 450px) {

  .treatment-flow__item {
    grid-template-columns: 130px 1fr;
    column-gap: 18px;
  }

  .treatment-flow__circle {
    width: 130px;
    height: 130px;
    position: relative;
    z-index: 2;
  }

  .treatment-flow__circle img {
    max-width: 84px;
    max-height: 82px;
  }

  .treatment-flow__num {
    width: 38px;
    height: 38px;
    font-size: 15px;
    top: 4px;
    left: 4px;
  }
	
  .treatment-flow__list::before {
     left: 65px !important;
	 top: 130px;
	 bottom: 120px;
  }
	
	
  .why-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
	padding: 36px 24px;
  }

  .why-card__body,
  .why-card__img-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .why-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .why-card__img {
    width: 40%;
    max-width: 40%;
  }
	
  .why-card__img-wrap {
    position: static;
    transform: none;
    margin-top: 24px;
    text-align: center;
  }
  .why-card:nth-child(2) .why-card__img {
	width: 40%;	
  }

  .why-card:nth-child(2) .why-card__img-wrap {
    margin-top: 0;
  }

  .treatment__img-wrap {
    width: 100%;
  }

  .treatment__img {
    max-width: 100%;
  }

}
	
/* =========================
  425px
========================= */	
@media screen and (max-width: 416px) {

  .price-table th{
    padding:14px 18px 0;
  }
  .price-table td {
    padding-top: 0;
  }
  .price-table tr {
    flex-wrap: wrap;
  }
  .price-table th,
  .price-table td:first-of-type {
    width: 100%;
  }

}
	
/* =========================
  551px 以上
========================= */	
@media screen and (min-width: 551px) {
	
　.page-id-653 .l-section:last-of-type {
  　　padding-bottom: 0;
　　}
	
}