/* IPCL紹介ページ（page-ipcl.php / EYE-109） */

/* モニター募集：遠近両用ページのモニター枠（e-cost.css）と同じ見た目。
   e-cost.css は .menu_item（ICL下層メニュー）にも効くため読み込まず、必要な指定だけをこのページ用に絞って持つ */
.ipcl_monitor .text_center {
  text-align: center;
}

.ipcl_monitor .text_red {
  color: red;
}

/* 募集人数：赤枠の中で一番大きく・太字（見出し .monitor_title 30px より大きく） */
.ipcl_monitor .monitor_count {
  font-size: 36px;
  font-weight: bold;
}

.ipcl_monitor .monitor_title {
  margin-bottom: 10px;
  font-size: 30px;
}

.ipcl_monitor .half_price {
  margin-bottom: 20px;
}

.ipcl_monitor .subject_term {
  margin-bottom: 0;
}

.ipcl_monitor .subject_list {
  list-style: none;
  padding-left: 4em;
  text-align: left;
}

/* 「・」「※」で始まる行は、折り返した2行目以降を記号の後ろにそろえる */
.ipcl_monitor .subject_list li {
  padding-left: 1em;
  text-indent: -1em;
}

/* オプション：「・オプション：」を左列、①②を右列にして、①②の頭と折り返しをそろえる */
.ipcl_monitor .subject_list li.option_row {
  display: flex;
  padding-left: 0;
  text-indent: 0;
}

.ipcl_monitor .subject_list li.option_row > span:first-child {
  flex-shrink: 0;
}

/* ①②は1行ずつ（option_item）。PCの横並びでは①②の頭と折り返しをそろえる */
.ipcl_monitor .subject_list li.option_row .option_item {
  display: block;
}

/* 縦並び：「・オプション：」の下に①②を並べ、①②はラベルより1文字下げ、折り返しは「① 」の後ろにそろえる
   英中（option_row--stack）は常に、日本語（option_row--stack-sp）はスマホのみ */
.ipcl_monitor .subject_list li.option_row--stack {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
.ipcl_monitor .subject_list li.option_row--stack > span {
  display: block;
  margin-left: 0;
}
.ipcl_monitor .subject_list li.option_row--stack .option_item {
  margin-left: 1em;
  padding-left: 1.3em;
  text-indent: -1.3em;
}

@media (max-width: 767px) {
  .ipcl_monitor .subject_list li.option_row--stack-sp {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
  }
  .ipcl_monitor .subject_list li.option_row--stack-sp > span {
    display: block;
    margin-left: 0;
  }
  .ipcl_monitor .subject_list li.option_row--stack-sp .option_item {
    margin-left: 1em;
    padding-left: 1.3em;
    text-indent: -1.3em;
  }
}

@media (min-width: 768px) {
  /* PCで折り返す位置を文節の切れ目にする（対応ブラウザ：Chrome・Edge。非対応のブラウザは通常の折り返し） */
  .ipcl_monitor {
    word-break: auto-phrase;
  }

  /* 折り返す行は各行の長さを均等にし、最後の行に数文字だけ残らないようにする
     （対応：Chrome・Edge 114+／Firefox 121+／Safari 17.5+。非対応は通常の折り返し） */
  .ipcl_monitor p,
  .ipcl_monitor h2,
  .ipcl_monitor li {
    text-wrap: balance;
  }

  .ipcl_monitor .subject {
    margin: 0 auto;
    max-width: 780px;
  }
}

/* IPCLとは：レンズ写真は下の小見出しの白い箱と同じ幅・余白の箱に入れ、中央に置く */
.ipcl_lens {
  text-align: center;
}

/* レンズ写真（962×460）は中央に置き、PCでは幅640pxまで（枠いっぱいに引き伸ばさない）。スマホは枠幅に合わせる */
.ipcl_lens img {
  display: block;
  width: 640px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 手術のプロセス：STEP画像4枚を横一列に並べ、説明はその下に縦に並べる */
.ipcl_step_images {
  display: flex;
  gap: 2%;
  margin: 20px 0 30px;
}

.ipcl_step_images picture {
  flex: 1;
}

@media (max-width: 767px) {
  .ipcl_monitor.guid_box {
    width: 90%;
    margin: 0 auto;
    padding: 15px 10px !important;
  }

  .ipcl_monitor .monitor_title {
    padding: 0;
    font-size: 5vw;
  }

  /* 見出し（5vw）より大きく */
  .ipcl_monitor .monitor_count {
    font-size: 6.5vw;
  }

  .ipcl_monitor .subject_list {
    padding-left: 2em;
  }

  /* 中央寄せの長文は折り返すと読みにくいため、スマホでは左寄せ */
  .ipcl_monitor > p.text_center {
    text-align: left;
  }

  /* STEP画像は小さくなりすぎるため2枚ずつ2段にする */
  .ipcl_step_images {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .ipcl_step_images picture {
    flex: 0 0 49%;
  }
}

/* PC：モニター枠と目次の間、目次と「IPCLとは」の間に余白（日英中共通）。
   「IPCLとは」の上60pxは日本語テーマの style.css（.icl_content）にあり、英中テーマには無いためここで指定する */
@media (min-width: 768px) {
  .ipcl_monitor + .page_guide_ul,
  section:has(> .ipcl_monitor) + section > .page_guide_ul {
    margin-top: 40px;
  }
  #ipcl_about .icl_content {
    margin-top: 60px;
  }
}