@charset "utf-8";

/* 当サイトのスタイル記述のうち全てのデバイス共通のもの */
/* 160404 */

.alignC {
  text-align: center;
}

/*---------------------------------------------
	body
  ---------------------------------------------*/
.min {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* calendar */
button .ui-datepicker-trigger img {
  width: 100%;
}

.cal-prev-btn,
.cal-next-btn {
  color: #fff !important;
}

.cal-select-year {
  width: 50px !important;
}

.cal-select-month {
  width: 30px !important;
}

.cl_main {
  color: #008bd2;
}

.bg_main {
  background-color: #008bd2;
}

.border_none {
  border: none !important;
}

.border_B,
.border_B2,
.border_B3 {
  border-bottom: solid 2px #008bd2;
}

.clearleft {
  clear: left;
}

body {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  *font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  background-color: #fff;
  color: #111;
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.mainwrapper {
  position: relative;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

h1,
#index2 .honbun dl dt,
#index3 .honbun dl dt {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "ヒラギノ丸ゴ ProN W4",
    "Hiragino Maru Gothic Pro", "Hiragino Maru Gothic ProN", "HG丸ｺﾞｼｯｸM-PRO",
    "HGMaruGothicMPRO", "メイリオ", Meiryo;
}

.min {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#index1 h1 {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  *font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.imgsizer img {
  width: 100%;
}

.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.bg-w {
  background: #fff;
}

blockquote {
  display: block;
  margin: 0 0 30px 50px;
}

blockquote p {
  margin: 0 0 0.2em 0;
}

/*---------------------------------------------
	Anchor
  ---------------------------------------------*/

a {
  outline: none;
}

a:link {
  text-decoration: none;
  color: #50b764;
}

a:visited {
  text-decoration: none;
  color: #50b764;
}

a:hover {
  text-decoration: none;
  color: #50b764;
}

a:active {
  text-decoration: none;
  //	color: #50b764;
}

/*
#topic a span{color:#333 !important;}
#topic a {color:#333 !important;}
#topic a:hover span{color:#1B96D5 !important; text-decoration:underline;}
#topic a:hover {color:#aaa !important; text-decoration:underline;}
 */
p {
  margin-bottom: 1em;
}

.nav-collapse ul li a:hover {
  /*text-decoration:underline;*/
}

.x4wrapper a:hover {
  text-decoration: underline;
  opacity: 0.5;
}

#f_nav div ul li a:hover {
  /*text-decoration:underline;*/
}

/*---------------------------------------------
 ** common
---------------------------------------------*/
.midashi_wrapper {
  width: 100%;
  clear: both;
}

.wrapper {
  width: 100%;
  clear: both;
}

.wrapperB {
  width: 100%;
  clear: none;
}

/*div.clear	{ width:100%; height:3px; font-size:2px; clear:both;}
*/

.tC {
  text-align: center;
}

.tL {
  text-align: left;
}

.tR {
  text-align: right;
}

.tS {
  font-size: 0.8em;
}

.bold {
  font-weight: bold;
}

.w050pct {
  width: 50%;
}

.w100pct {
  width: 100%;
}

.w-20px {
  width: calc(100% - 20px);
}

.w-30px {
  width: calc(100% - 30px);
}

.w-40px {
  width: calc(100% - 40px);
}

.font_sss {
  font-size: 0.8em !important;
}

.over_zoom {
  _zoom: 1;
  overflow: hidden;
}

.doct {
  font-weight: bold;
  float: right;
  margin: 15px 0 0 0;
  color: #ef94bd;
}

.m_0auto {
  margin: 0 auto;
}

.m_T_06 {
  margin-top: 6px !important;
}

.m_T_10 {
  margin-top: 10px !important;
}

.m_T_20 {
  margin-top: 20px !important;
}

.m_T_30 {
  margin-top: 30px !important;
}

.m_T_35 {
  margin-top: 35px !important;
}

.m_T_40 {
  margin-top: 40px !important;
}

.m_B_00 {
  margin-bottom: 0 !important;
}

.m_B_10 {
  margin-bottom: 10px !important;
}

.m_B_20 {
  margin-bottom: 20px !important;
}

.m_B_25 {
  margin-bottom: 25px !important;
}

.m_B_30 {
  margin-bottom: 30px !important;
}

.m_B_35 {
  margin-bottom: 35px !important;
}

.m_B_40 {
  margin-bottom: 40px !important;
}

.m_B_50 {
  margin-bottom: 50px;
}

.m_B_55 {
  margin-bottom: 55px;
}

.m_B_60 {
  margin-bottom: 60px;
}

.m_L_15 {
  margin-left: 15px;
}

.m_L_20 {
  margin-left: 20px;
}

.m_L_30 {
  margin-left: 30px;
}

.m_L_40 {
  margin-left: 40px;
}

.m_L_50 {
  margin-left: 50px;
}

.m_L_60 {
  margin-left: 60px;
}

.m_R_10 {
  margin-right: 10px;
}

.m_R_15 {
  margin-right: 15px;
}

.m_R_20 {
  margin-right: 20px;
}

.m_R_30 {
  margin-right: 30px;
}

.m_R_40 {
  margin-right: 40px;
}

.m_R_50 {
  margin-right: 50px;
}

.p_0_2 {
  padding: 0 2px;
}

.p_10_0 {
  padding: 10px 0;
}

.p_R_10 {
  padding-right: 10px;
}

.p_15 {
  padding: 15px;
}

.float_L {
  float: left;
}

.float_R {
  float: right;
}

/*---------------------------------------------
 ** パンくずリスト
---------------------------------------------*/
nav#breadcrumbs ol {
  padding: 0;
}

nav#breadcrumbs ol li {
  display: inline;
  list-style-type: none;
  font-size: 80%;
}

nav#breadcrumbs ol li:before {
  content: " > ";
}

nav#breadcrumbs ol li:first-child:before {
  content: "";
}

/* a hover */
.hover,
.anim {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.hover:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}

/* 背景サイズ */
.bg_free {
  background-size: contain !important;
}

/* カラー */

.cl_sub {
  color: #8fbc39;
}

.bg_sub {
  background: #8fbc39;
}

.cl_alt1 {
  color: #0f4386;
}

/* 濃い青色 */
.bg_alt1 {
  background: #0f4386;
}

.cl_alt2 {
  color: #a9caf5;
}

/* 薄い青色（info欄の背景） */
.bg_alt2 {
  background: #a9caf5;
}

.cl_alt3 {
  color: #99ccff;
}

/* 水色（画像アクセント） */
.bg_alt3 {
  background: #99ccff;
}

.cl_alt4 {
  color: #eefaff;
}

/* 淡い水色（切り替えの背景色） */
.bg_alt4 {
  background: #eefaff;
}

.cl_alt5 {
  color: #e3f1ff;
}

/* 淡い水色（フッターの背景色） */
.bg_alt5 {
  background: #e3f1ff;
}

.cl_fff {
  color: #fff;
}

.bg_fff {
  background: #fff;
}

.bg_gray {
  background: #f7f7f7;
}

.cl_dark {
  color: #333;
}

.b {
  font-weight: bold;
}

.u {
  text-decoration: underline;
}

.lh_09e {
  line-height: 0.9em;
}

.lh_10e {
  line-height: 1em;
}

.lh_14e {
  line-height: 1.4em;
}

.fs_06r {
  font-size: 0.6rem;
}

.fs_08r {
  font-size: 0.8rem;
}

.fs_09r {
  font-size: 0.9rem;
}

/* シャドウ */
.box_shadow {
  -webkit-box-shadow: 0px 7px 9px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.1);
}

/* 角丸 */
.maru {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.maru10 {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.maru20 {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

.maru p,
.maru10 p,
maru20 p {
  margin-bottom: 0;
}

/*---------------------------------------------
 ** ルビ
---------------------------------------------*/
ruby>rt {
  font-size: 40%;
  text-align: center;
}

/*---------------------------------------------
 ** width
---------------------------------------------*/
.w_200 {
  width: 200px;
}

.w_250 {
  width: 250px;
}

.w_270 {
  width: 270px;
}

.w_280 {
  width: 280px;
}

.w_300 {
  width: 300px;
}

.w_400 {
  width: 400px;
}

.w_420 {
  width: 420px;
}

.w_440 {
  width: 440px;
}

.bg_blue {
  background-color: rgb(249, 249, 249);
  border-color: rgb(238, 238, 238);
  border-width: 1px;
  padding: 20px;
  border-style: solid;
  -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
  border-width: 1px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  border-style: solid;
}

/*---------------------------------------------
 ** 画像のcss
---------------------------------------------*/
.img_R {
  float: right;
  margin: 0 0 0 30px;
}

.img_L {
  float: left;
  margin: 0 40px 0 0;
}

.img_C {
  float: left;
  margin: 0 0 20px 0;
}

/*---------------------------------------------
 ** body, box
---------------------------------------------*/
#footer p {
  font-size: 0.9em;
}

/*#index p, #doctor p,#first p,#clinic p,#treat p,#faq p,#access p {font-size:0.9em;}*/

.href_ara {
  display: block;
  width: 100%;
  height: 100%;
}

.punderimg {
  margin-top: 1em !important;
  text-align: left !important;
  margin-bottom: 0;
}

hr.bdr {
  border-bottom: solid 1px #333;
}

.zerob {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.pre_2wari {
  margin-bottom: 0px !important;
}

.tyushaku {
  font-size: 14px;
}

/*=================================================================================================================================*/
/**  カスタマイズ	*/
/*=================================================================================================================================*/

/*=================================================================================================================================*/
/**  共通部分	*/
/*=================================================================================================================================*/

/* 多焦点眼内レンズのメリットとデメリット */
.bdr_3px {
  border: 3px solid #166142;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  padding-bottom: 3%;
  box-sizing: border-box;
  /*通常の記述*/
  -webkit-box-sizing: border-box;
  /*Google ChromeやSafariの機能を利用*/
  -moz-box-sizing: border-box;
  /*Firefoxの機能を利用*/
}

.col_pink,
.col_pink h3,
.col_pink dl {
  border-color: #ff4c4c;
}

.col_pink .bdr_3px_inner dt {
  color: #ff4c4c;
}

.bdr_3px_title {
  border-bottom: 1px solid #166142;
  padding: 15px 15px 10px;
  margin-bottom: 6%;
  color: #000;
}

.bdr_3px_inner {
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #166142;
}

.bdr_3px_inner:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.bdr_3px_inner dt,
.bdr_3px_inner dd {
  padding: 0 6%;
}

.bdr_3px_inner dt {
  color: #145f40;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  margin-bottom: 5px;
}

.h4_style_reset {
  display: inline-block;
  padding: unset;
  color: unset;
  text-decoration: unset;
  font-size: unset;
  letter-spacing: unset;
  text-align: left;
  line-height: 1.4;
}

.strong {
  font-weight: bold;
}

.por {
  position: relative;
}

.pl35 {
  padding-left: 35px !important;
}

.icon_check:before {
  width: 35px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  margin-top: 5px;
}

.check_green:before {
  background: url(../img/lens-selection/check_green.png) 0 0 no-repeat;
}

.check_pink:before {
  background: url(../img/lens-selection/check_pink.png) 0 0 no-repeat;
}

.check_green:before,
.check_pink:before {
  background-size: contain;
}

/* 多焦点眼内レンズが不適応となるケース */
.inner_01 {
  margin: 0 auto;
  padding: 3% 5%;
}

.inner_02 {
  width: 80%;
  margin: 0 auto;
  padding: 2% 5% 3%;
}

.ng_pink {
  font-size: 24px;
  color: #ff4c4c;
  padding: 5px 0 0 0;
}

.icon_ng:before {
  width: 36px;
  height: 32px;
  background: url(../img/lens-selection/icon_ng.png) 0 0 no-repeat;
  background-size: contain;
}

.ng_pl {
  padding-left: 50px !important;
}

/* レンズ選択のポイント */
.h4_green {
  color: #145f40;
}

.select-point {
  margin-bottom: 5px;
}

.select-point dt {
  width: 30%;
  font-size: 18px;
  background: #f0f0f0;
  text-align: center;
  padding: 2% 0 2%;
}

.select-point dd ul li {
  float: left;
  display: block;
  position: relative;
  padding: 0 0 0 1.1em;
  margin-right: 1em;
}

.select-point dd ul li:after {
  position: absolute;
  top: 0px;
  left: 0px;
  content: "■";
}

.td_udline {
  text-decoration: underline !important;
}

.td_udline:hover {
  text-decoration: none !important;
}

.select-point dd {
  padding: 2.5% 0 1.5%;
  width: 65%;
}

.pb0 {
  padding-bottom: 0 !important;
}

/* ハロー・グレアとは */
.hg_wrapper {
  width: 100%;
  _zoom: 1;
  overflow: hidden;
  margin-bottom: 10px;
}

.hg_wrapper dt {
  font-size: 20px;
  font-weight: bold;

}

.hg_wrapper dt:before {
  content: "■";
  color: #50B764;
}

.hg_wrapper dd {
  float: left;
}


/*---------------------------------------------
 **  flexbox
---------------------------------------------*/
.display_flex {
  display: flex;
}

.flex_wrapper {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex_item_clounm_2 {
  width: 48.5% !important;
  margin-bottom: 25px;
}

.flex_item_clounm_3 {
  width: 31.5%;
}

.flex_item_clounm_4 {
  width: 23.5%;
  margin-bottom: 25px;
}

/*=================================================================================================================================*/
/**  個別指定 for スマートフォン	*/
/*=================================================================================================================================*/
@media screen and (max-width: 767px) {

  /*---------------------------------------------
 **  flexbox
---------------------------------------------*/
  .flex_item_clounm_2 {
    width: 100% !important;
  }

  .flex_item_clounm_3 {
    width: 100% !important;
  }

  .flex_item_clounm_4 {
    width: 100% !important;
  }

  .common_btn_layout {
    width: calc(50% - 50px);
    font-weight: normal;
    font-size: 1.6em;
    line-height: 2em;
    margin: 1em 25px;
  }

  .box_cont {
    margin: 10px auto !important;
  }

  .only_sp_none {
    display: none;

  }

  .select-point {
    margin-bottom: 15px;
  }

  .select-point dt {
    width: 100%;
  }

  .select-point dd {
    width: 100%;
  }

  .hg_img img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }


  #lens-selection .main_img h1 {
    font-size: 1.3em;
  }

}

/*=================================================================================================================================*/
/**  個別指定 for タブレット	*/
/*=================================================================================================================================*/
@media (min-width: 768px) and (max-width: 1199px) {
  .common_btn_layout {
    max-width: 216px;
  }

  .box_cont_inner {
    display: block;
    padding: 0 30px;
  }

  .negative_top {
    margin-top: -4em !important;
  }

  /* ハロー・グレアとは */
  .hg_wrapper dt {
    float: left;
    padding-right: 1em;
  }

  .hg_img img {
    width: 100%;
    height: auto;
  }

}

/*=================================================================================================================================*/
/**  個別指定 for PC	*/
/*=================================================================================================================================*/
@media (min-width: 1200px) {
  .common_btn_layout {
    margin: 1em 25px;
  }

  .box_cont_btn_wrapper {
    margin: -4em 50px 0;
  }

  .w1100 {
    width: 1100px;
    margin: 0 auto;
  }

  .box_cont_inner+.box_cont_inner {
    margin-bottom: 0;
  }

  .negative_top {
    margin-top: -4em !important;
  }

  /* ハロー・グレアとは */
  .hg_wrapper dt {
    float: left;
    padding-right: 1em;
  }

  .next_bt div {
    width: 48% !important;
  }

}


#lens-selection .main_img h1:after {
  content: "LENS SELECTION";
  width: 13em;
  ;
  display: block;
  height: 1.4em;
  line-height: 1.4em;
  color: #666;
  letter-spacing: 3px;
  font-size: 16px;
  font-weight: normal;
  display: inline-block;
  padding: 5px 0px;
  position: absolute;
  top: 90px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-top: solid 1px #09613e;
  border-bottom: solid 1px #09613e;
  ;
}

#myopine .main_img h1:after {
  content: "MYOPINE";
  width: 13em;
  ;
  display: block;
  height: 1.4em;
  line-height: 1.4em;
  color: #666;
  letter-spacing: 3px;
  font-size: 16px;
  font-weight: normal;
  display: inline-block;
  padding: 5px 0px;
  position: absolute;
  top: 90px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-top: solid 1px #09613e;
  border-bottom: solid 1px #09613e;
  ;
}

#icl .main_img h1:after {
  content: "IMPLANTABLE COLLAMER LENS";
  width: 13em;
  ;
  display: block;
  height: 3rem;
  line-height: 1.4em;
  color: #666;
  letter-spacing: 3px;
  font-size: 16px;
  font-weight: normal;
  display: inline-block;
  padding: 5px 0px;
  position: absolute;
  top: 123px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-top: solid 1px #09613e;
  border-bottom: solid 1px #09613e;
  ;
}


.lentis-price__wrapper {
  display: none;
}

.print-only {
  display: none;
}