@charset "utf-8";
/*
Description: 四谷見附クリニックリスティング広告ページ用
Theme URI: https://www.ym-clinic.jp/
Author: 四谷見附クリニック
*/
/* 
main.lp_page {
    background-image: linear-gradient(0deg, rgba(200, 230, 250, 1), rgba(250, 250, 250, 1));
}

main .container h2.title {
    border-color: rgba(220, 240, 255, 1);
    background-image: linear-gradient(0deg, rgba(220, 240, 255, 1), rgba(220, 240, 255, 1));
}

.booking-form {
    background-color: inherit;
} */

section {
  background: rgb(250, 250, 250, 0.5);
}

/*
.catch {
  position: relative;
  height: 37.5rem;
  width: 100%;
}

.main_image {
  right: 0;
  position: absolute;
  top: 0;
}

.insurance {
  left: 0;
  position: absolute;
  top: 5.5rem;
}

.keyword {
  left: 0;
  position: absolute;
  z-index: 1000;
}

main .container .post .keyword h1 {
  display: inline-block;
  font-size: 4rem;
  font-weight: bolder;
  letter-spacing: 0.3rem;
  margin-bottom: 0;
  -webkit-text-stroke: 6px rgb(255, 255, 255);
  text-stroke: 6px rgb(255, 255, 255);
  paint-order: stroke;
}

.catchword {
  left: 0;
  position: absolute;
  top: 9.5rem;
}

.counseling {
  left: 0;
  position: absolute;
  top: 17rem;
  width: 36rem;
  border-radius: 0.625rem;
  padding: 0.5rem;
  background: rgb(255, 80, 150, 0.3);
}

.sns_contact {
  left: 0;
  position: absolute;
  top: 30rem;
  width: 36rem;
  text-align: center;
  font-size: 0.6em;
  font-family: sans-serif;
}
*/

.nav_wrap {
  margin-top: -2rem;
}

@media (max-width: 835px) {
  .nav_wrap {
    margin-top: 0;
  }
}

.telphone_reservation {
  top: 0;
}

main .container .post .keyword h1 {
  display: inline-block;
  font-size: 4rem;
  font-weight: bolder;
  letter-spacing: 0.3rem;
  margin-bottom: 0;
  -webkit-text-stroke: 6px rgb(255, 255, 255);
  text-stroke: 6px rgb(255, 255, 255);
  paint-order: stroke;
}

@media (max-width: 440px) {
  main .container .post .keyword h1 {
    font-size: 2.7rem;
  }
}

/* CSS Grid レイアウト */

.catch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto; /* 左：テキスト、右：画像 */
  grid-template-rows:
    auto
    auto
    auto
    auto
    auto; /* テキスト3行 */
  grid-template-areas:
    "keyword main_image"
    "insurance main_image"
    "catchword main_image"
    "counseling main_image"
    "sns_contact main_image";
  gap: 10px; /* 要素間の隙間 */
  width: 100%;
}

.main_image {
  grid-area: main_image;
  /* 画像がはみ出さないように max-width などを必要に応じて */
  max-width: 100%;
  height: auto;
}

.keyword {
  grid-area: keyword;
}
.insurance {
  grid-area: insurance;
}
.catchword {
  grid-area: catchword;
}
.counseling {
  grid-area: counseling;
}
.sns_contact {
  grid-area: sns_contact;
}

@media (max-width: 960px) {
  .catch {
    /* １カラムにして縦積み */
    grid-template-columns: 1fr;
    grid-template-areas:
      "main_image"
      "keyword"
      "insurance"
      "catchword"
      "counseling"
      "sns_contact";
  }
  .main_image {
    /* 必要なら画像幅も調整 */
    max-width: 100%;
    margin-left: auto;
  }

  /* keyword を同じセルに */
  .keyword {
    /* 行・列を明示指定して main_image と重ねる */
    grid-column: 1 / 1; /* ２列目から３列目手前まで */
    grid-row: 1 / 7; /* １行目から２行目手前まで */

    z-index: 2; /* 画像（デフォルト z-index: auto）より前面に */

    /* 見た目調整 */
    width: max-content; /* テキスト幅に合わせて余白なく */
    padding: 4px;
    /* background: rgba(255, 255, 255, 0.8);*/ /* 画像上でも読みやすく */
  }

  /* insurance を同じセルに */
  .insurance {
    /* 行・列を明示指定して main_image と重ねる */
    grid-column: 1 / 1; /* ２列目から３列目手前まで */
    grid-row: 1 / 7; /* １行目から２行目手前まで */

    z-index: 3; /* 画像（デフォルト z-index: auto）より前面に */

    /* 見た目調整 */
    margin-top: 6rem;
    width: max-content; /* テキスト幅に合わせて余白なく */
    padding: 4px;
    /* background: rgba(255, 255, 255, 0.8);*/ /* 画像上でも読みやすく */
  }

  .catchword {
    /* 行・列を明示指定して main_image と重ねる */
    grid-column: 1 / 1; /* ２列目から３列目手前まで */
    grid-row: 1 / 7; /* １行目から２行目手前まで */

    z-index: 4; /* 画像（デフォルト z-index: auto）より前面に */
    /* 見た目調整 */
    margin-top: 30rem;
    width: max-content; /* テキスト幅に合わせて余白なく */
    padding: 4px;
    /* background: rgba(255, 255, 255, 0.8);*/ /* 画像上でも読みやすく */
  }
}

@media (max-width: 440px) {
  .insurance {
    margin-top: 4rem;
  }
  .catchword {
    /* 行・列を明示指定して main_image と重ねる */
    grid-column: 1 / 1; /* ２列目から３列目手前まで */
    grid-row: 2 / 2; /* １行目から２行目手前まで */
    margin: -2rem auto -1rem auto;
  }
}

.counseling {
  width: 36rem;
  border-radius: 0.625rem;
  padding: 0.5rem;
  background: rgb(255, 80, 150, 0.3);
}

@media (max-width: 960px) {
  .counseling {
    width: 100%;
    margin: -3rem auto 0 auto;
  }
}

@media (max-width: 440px) {
  .counseling {
    margin: -1rem auto 0 auto;
  }
}

.sns_contact {
  width: 36rem;
  text-align: center;
  font-size: 0.6em;
  font-family: sans-serif;
}

@media (max-width: 960px) {
  .sns_contact {
    height: 4rem;
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* /CSS Grid レイアウト */

.sns_contact i {
  font-size: 3em;
  line-height: 34px;
  margin-top: 6px;
}

.sns_contact .pf-btn {
  display: inline-block;
  width: 28%;
  height: 60px;
  margin: 0% 1.5% 5%;
  border-radius: 5px;
  letter-spacing: 0.05em;
  opacity: 0.7;
  color: #fff;
}

.sns_contact_bosy {
  text-align: center;
  font-size: 0.6em;
  font-family: sans-serif;
  margin-bottom: 1rem;
}

.sns_contact_bosy i {
  font-size: 3em;
  line-height: 34px;
  margin-top: 6px;
}

.sns_contact_bosy .pf-btn {
  display: inline-block;
  width: 28%;
  height: 60px;
  /* margin: 0% 1.5% 5%; */
  margin: 0% 1.5% 0%;
  border-radius: 5px;
  letter-spacing: 0.05em;
  opacity: 0.7;
  color: #fff;
}

/* @media (max-width: 375px) {
  .sns_contact {
    top: 53rem;
  }
}

@media (max-width: 1200px) {
  .sp_content {
    height: 11rem;
  }
  .counseling {
    top: 38rem;
    width: 100%;
  }
}

@media (max-width: 960px) {
  .catchword {
    top: 37.5rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    max-width: 100%;
    /box-sizing: border-box;
  }
  .counseling {
    top: 45rem;
    width: 100%;
  }
  .sns_contact {
    top: 56rem;
    height: 4rem;
    width: 100%;
  }
  .sp_content {
    height: 41em;
  }
} */

/* @media (max-width: 959px) {
  .sns_contact {
    top: 58rem;
  }
}

@media (max-width: 440px) {
  .keyword {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
  }
  .catch {
    height: 28rem;
  }
  main .container .post .keyword h1 {
    font-size: 2.7rem;
  }
  .insurance {
    top: 4rem;
  }
  .catchword {
    top: 29rem;
  }
  .counseling {
    top: 35rem;
  }
  .sns_contact {
    top: 56rem;
  }
} */

/* @media (max-width: 430px) {
  .catch {
    height: 28rem;
  }
  .catchword {
    top: 28em;
  }
  .counseling {
    top: 34rem;
  }
  .sns_contact {
    top: 55rem;
  }
}

@media (max-width: 402px) {
  .catch {
    height: 26rem;
  }
  .sp_content {
    height: 33rem;
  }
  .catchword {
    top: 26.5em;
  }
  .counseling {
    top: 33rem;
  }
  .sns_contact {
    top: 54rem;
  }
} */

/* 
@media (max-width: 375px) {
  .catch {
    height: 24rem;
  }
  .catchword {
    top: 25rem;
  }
  .counseling {
    top: 32rem;
  }
  .sns_contact {
    top: 53rem;
  }
  .sp_content {
    height: 35rem;
  }
} */

body main .container .post p {
  text-indent: 0;
  margin-bottom: 0;
}

main .container .post .counseling h2 {
  text-align: center;
  color: rgb(100, 100, 100);
  font-size: 1.375rem;
  font-family: serif;
  font-weight: bolder;
}

body main .container .post .insurance p {
  display: inline-block;
  border-radius: 0.3125rem;
  color: rgb(255, 255, 255);
  font-size: 2rem;
  font-weight: bolder;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  letter-spacing: 0.3rem;
  padding: 0 0.5rem;
  border: rgb(255, 80, 150) solid 0.0625rem;
  background: rgb(255, 80, 150);
}

p.surgery {
  /* display: inline-block; */
  font-size: 2rem;
  font-weight: bolder;
  letter-spacing: 0.1rem;
}

.fee {
  /* margin-top: -1rem; */
  margin: -1rem auto 0 auto;
}

dl.fee dt {
  /* display: inline-block; */
  font-size: 2rem;
  font-weight: bolder;
  letter-spacing: 0.1rem;
  margin-top: 1.25rem;
  margin-right: 1rem;
}

dl.fee dd {
  margin-bottom: 0;
}

dl.fee dd.sum {
  font-size: 3rem;
  font-family: serif;
}

span.unit {
  font-size: 2rem;
  font-weight: bolder;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

@media (max-width: 960px) {
  /* p.surgery {
    text-align: center;
  }
  dl.fee {
  } */
}

.counseling p {
  color: rgb(100, 100, 100);
  letter-spacing: 0.1rem;
  font-size: 1.125rem;
  font-weight: bolder;
}

@media (max-width: 440px) {
  body main .container .post .insurance p {
    font-size: 1.25rem;
  }
  p.surgery {
    font-size: 1.875rem;
  }
  dl.fee dt {
    font-size: 1.875rem;
    margin-top: 0.875rem;
  }
  dl.fee dd.sum {
    font-size: 2.5rem;
  }
  span.unit {
    font-size: 1.875rem;
  }
}

main .container h2.lp_heading2 {
  font-size: 2rem;
  font-weight: bolder;
  text-align: center;
  letter-spacing: 1rem;
  margin-bottom: 0;
  padding: 1rem 0;
  background: rgb(255, 80, 150, 0.3);
  border-bottom: #fff 2px solid;
}

@media (max-width: 440px) {
  main .container h2.lp_heading2 {
    letter-spacing: 0.5rem;
  }
}

@media (max-width: 375px) {
  main .container h2.lp_heading2 {
    letter-spacing: 0;
  }
}

main .container h3.lp_heading3 {
  font-size: 1.5rem;
  font-weight: bolder;
  text-align: center;
  padding: 0.5rem 0;
  margin-bottom: 0;
  border-bottom: 10px solid rgb(255, 80, 150, 1);
}

main .container h4.lp_heading4 {
  font-size: 1.125rem;
  font-weight: bolder;
  padding: 0.3125rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 3px solid rgb(255, 80, 150, 1);
}

.catch_copy {
  background: rgb(255, 80, 150, 0.3);
}

.catch_copy p {
  font-size: 2.375rem;
  font-weight: bolder;
  text-align: center;
}

.column_unit {
  margin-top: 1rem;
}

.column_unit p {
  font-size: 1.375rem;
}

span.lp_attention {
  font-size: 2.8rem;
  color: rgb(255, 0, 0);
}

dl.name dd span.family_name {
  display: inline-block;
  width: 5rem;
}

dl.email dd .wpcf7-email {
  width: auto;
}

.ba_definition dl {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: solid 2px rgb(204, 204, 204);
}

.ba_definition dl dt {
  width: 6rem;
  padding: 0.3125rem;
  /* background: rgb(239, 239, 239); */
}

@media (max-width: 440px) {
  .ba_definition dl dt {
    width: 100%;
    background: rgb(255, 226, 226);
  }
}

.ba_definition dl dd {
  margin-bottom: 0;
  padding: 0.3125rem;
}

.ba_definition dl dd ul {
  padding-left: 0;
}

ul.correspond {
  font-size: 1.25rem;
}

ul.correspond li {
  padding-left: 0.5rem;
}

ul.correspond li:nth-child(2n + 1) {
  background: rgb(240, 240, 240);
}

ul.feature {
  font-size: 1.25rem;
  padding: 0.5rem;
  margin-bottom: 0;
  background: rgb(240, 240, 240);
}

ul.feature li {
  padding-left: 0.5rem;
  margin-bottom: 0.5rem;
  /* padding-bottom: 0.3125rem; */
  border-bottom: solid 1px rgb(200, 200, 200);
}

main .container h3.lp_heading3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.1rem;
}

.treatment_flow dl {
  margin: 1rem auto;
  width: 40rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(#ccf9ff, #87d6ff);
}

@media (max-width: 440px) {
  .treatment_flow dl {
    width: auto;
  }
}

.treatment_flow dl dt {
  /* margin: 1rem 0; */
  padding: 0 1rem;
}

.treatment_flow dl dt h3 {
  font-size: 1.375rem;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  border-bottom: solid 2px rgb(255, 255, 255);
}

.treatment_flow dl dd {
  font-size: 1.25rem;
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
}

body main .container .post .column_unit p {
  margin-bottom: 1rem;
}

.lp_price_block {
  margin: 1rem auto;
  font-size: 1.375rem;
}

main .container .post .lp_price_block .treatment_outline p {
  font-size: 1.25rem;
}

.lp_price_block .price_title,
.lp_price_block .price_unit {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.booking-form {
  padding: 0;
}

.booking-form_wrap {
  padding: 1rem;
}

.lp_cf7form dl.name,
.lp_cf7form dl.age,
.lp_cf7form dl.telephone,
.lp_cf7form dl.contact_email,
.lp_cf7form dl.second {
  margin-bottom: 1rem;
}

.lp_cf7form dl.name dd,
.lp_cf7form dl.telephone dd {
  float: none;
}

.lp_cf7form dl.name dt,
.lp_cf7form dl.telephone dt,
.lp_cf7form dl.consultation_appointment dt,
.lp_cf7form dl.contact_email dt {
  white-space: nowrap;
  margin-bottom: 0.3125rem;
  border-bottom: 1px solid #c4c7cc;
}

.lp_price_block dl dt h3 {
  font-size: 1.375rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  margin-bottom: 0.5rem;
}

.lp_cf7form dl.age dd span.wpcf7-list-item {
  margin-right: 1rem;
}

.wpcf7-form .lp_cf7form dl.name dd input {
  width: 100%;
}

.wpcf7-form .lp_cf7form input[type="text"]::-webkit-input-placeholder,
.wpcf7-form .lp_cf7form input[type="tel"]::-webkit-input-placeholder,
.wpcf7-form .lp_cf7form input[type="email"]::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  font-size: 0.875rem;
  color: #fa9696;
}
.wpcf7-form .lp_cf7form input[type="text"]::-ms-input-placeholder,
.wpcf7-form .lp_cf7form input[type="tel"]::-ms-input-placeholder,
.wpcf7-form .lp_cf7form input[type="email"]::-ms-input-placeholder {
  /* Edge */
  font-size: 0.875rem;
  color: #fa9696;
}
.wpcf7-form .lp_cf7form input[type="text"]::placeholder,
.wpcf7-form .lp_cf7form input[type="tel"]::placeholder,
.wpcf7-form .lp_cf7form input[type="email"]::placeholder {
  /* Modern browsers */
  font-size: 0.875rem;
  color: #fa9696;
}

dl.reservation dd ul {
  margin-bottom: 0;
}

.location_column_unit {
  margin-top: 0;
  margin-bottom: 0;
}

dl.lp_clinic_location {
  margin-left: 1rem;
  font-size: 1.125rem;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

dl.lp_clinic_location dt,
dl.lp_clinic_location dd {
  margin-bottom: 0;
}

#contact_from_web {
  margin: 0;
  padding: 0;
}

.footer_wrap {
  height: 6rem;
}

@media (max-width: 440px) {
  .footer_wrap {
    height: 7rem;
  }
}

.bottom_menu ul.sp_contact li.lp_line {
  /* border-left: solid #fff 1px; */
}

.bottom_menu ul.lp_footer_menu {
  height: 4rem;
}

.lp_pf-btn {
  /*snsボタンの共通部分*/
  display: inline-block;
  /*横幅や縦幅を設定できるように*/
  width: 100%;
  /*横幅*/
  height: 60px;
  /*行間*/
  /* margin: 0% 1.5% 5%; */
  /*外側の余白*/
  border-radius: 5px;
  /*角丸*/
  letter-spacing: 0.05em;
  /*文字の感覚*/
  opacity: 0.7;
  /*透明度*/
  color: #fff;
  /*文字色白*/
}

.lp_pf-btn:hover {
  /*ホバーエフェクト*/
  opacity: 1;
  /*透明度なし*/
  text-decoration: none;
  /*テキストの装飾をOFF*/
  transition: all ease-in-out 0.3s;
  /*なめらかに*/
}

.lp_contact i {
  font-size: 2rem;
  line-height: 2.5rem;
}

.email-bc {
  background-color: #00b9a6;
}

.phone-bc {
  background-color: #b92e00;
}

p.lp_reservation {
  color: #fff;
  font-family: "serif";
  text-align: center;
  letter-spacing: 0.3125rem;
  text-indent: 1em;
  margin: 0;
  padding: 0.125rem 0;
  border-bottom: 2px solid #fff;
  background: #1d5794;
}

span.hiragana {
  font-size: 0.875rem;
}