@charset "utf-8";
@import "style.css";

/*========================================================================================================================


  ◇◆◇ 当院で行う手術 ◇◆◇
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  ページの目次
  
----------------------------------------------------------------------------------------------------*/

.pgMokuji ul {
  list-style:none;
  margin-left:-11px;
  margin-right:-11px;
}

.pgMokuji li {
  width:33.333333%;
  float:left;
  box-sizing:border-box;
  text-align:center;
  padding-left:11px;
  padding-right:11px;
  line-height:1.4;
}

.pgMokuji li a,
.pgMokuji li a:visited,
.pgMokuji li a:hover { color:#2980c2; text-decoration:none; }

.pgMokuji li .pgMokuji-item {
  width:100%;
  display:table;
}

.pgMokuji li a {
  width:100%;
  display:table-cell;
  vertical-align:middle;
  border:1px solid rgba(70,148,208,0.6);
  border-radius:4px;
  box-sizing:border-box;
  padding:0.75em 1em;
  font-size:118.8%;
  position:relative;
}

.pgMokuji li .txtLink-ic { background-image:url(../../image/icon/downC-blue.svg); }
.no-svg .pgMokuji li .txtLink-ic { background-image:url(../../image/icon/downC-blue.png); }


@media screen and (min-width:768px) {
  .pgMokuji li a {
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  
  .pgMokuji li a:hover {
    border-color:#4694d0;
    background-color:#4694d0;
    color:#fff;
  }
  
  .pgMokuji li a:hover .txtLink-ic { background-image:url(../../image/icon/downC-white.svg); }
  .no-svg .pgMokuji li a:hover .txtLink-ic { background-image:url(../../image/icon/downC-white.png); }
  
  .pgMokuji li .txtLink { padding-left:1.4em; }
  html.font-large .pgMokuji li .txtLink { padding-left:1.2em; }

  .pgMokuji li .txtLink-ic { top:0.65em; }
}

@media screen and (max-width:767px) {
  .pgMokuji ul {
    margin-left:-0.375em;
    margin-right:-0.375em;
  }
  
  .pgMokuji li {
    padding-left:0.375em;
    padding-right:0.375em;
  }
  
  .pgMokuji li a {
    font-size:100%;
  }
  
  .pgMokuji li .txtLink-ic {
    top:0.75em;
    width:15px;
    height:15px;
  }
}

@media screen and (max-width:500px) {
  .pgMokuji ul {
    margin-left:-0.25em;
    margin-right:-0.25em;
  }
  
  .pgMokuji li {
    padding-left:0.25em;
    padding-right:0.25em;
  }

  .pgMokuji li a {
    padding:0.75em;
  }
  
  .pgMokuji li .txtLink-ic {
    width:13px;
    height:13px;
  }
}


/*----------------------------------------------------------------------------------------------------

  共通
  
----------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
  ブロック
-----------------------------------------------------------------------------------*/

.scBlockA {
  margin-top:40px;
}

.scBlockA-headline {
  background-color:#91cb6a;
  color:#fff;
  font-weight:500;
  border-radius:4px 4px 0 0;
  padding:0.5em 1em;
  font-size:137.5%;
  box-sizing:border-box;
  text-align:center;
}

.scBlockA-body {
  border-radius:0 0 4px 4px;
  box-sizing:border-box;
  border:2px solid #dcdcdc;
  border-top:0;
  padding:30px;
  position:relative;
}

@media screen and (max-width:767px) {
  .scBlockA {
    margin-top:1.5em;
  }
  
  .scBlockA-body {
    padding:1.25em;
  }
}

@media screen and (max-width:640px) {
  .scBlockA-body {
    padding:1em;
  }
}

@media screen and (max-width:500px) {
  .scBlockA {
    margin-top:1.25em;
  }
}


/* 画像 ----------------------------------------*/

.photoR450-photo {
  line-height:0;
}

.photoR450-photo img {
  border-radius:4px;
}
  
@media screen and (min-width:768px) {
  .photoR450-txt {
    width:563px;
    float:left;
  }
    
  .photoR450-photo {
    width:450px;
    float:right;
  }
}

@media screen and (max-width:767px) {
  .photoR450-photo {
    padding-top:1em;
    text-align:center;
  }
  
  .photoR450-photo img {
    width:100%;
    max-width:400px;
  }
}


/*-----------------------------------------------------------------------------------
  手術の方法
-----------------------------------------------------------------------------------*/

.scBlockB-warp {
  background:url(../../image/lineDiag-rgreen.png) repeat left top;
  background-color:#f2f9ed;
  border-radius:4px;
  padding:6px;
  margin-top:40px;
}

.scBlockB {
  background-color:#f2f9ed;
  border-radius:4px;
  padding:30px;
}

.scBlockB-headline {
  text-align:center;
  color:#7cbd51;
  font-weight:500;
  font-size:162.5%;
}

.scBlockB p {
  padding-top:0.5em;
}

@media screen and (max-width:767px) {
  .scBlockB-warp {
    padding:5px;
    margin-top:1.75em;
    background-size:16px auto;
  }
  
  .scBlockB {
    padding:1.25em;
  }
}

@media screen and (max-width:640px) {
  .scBlockB {
    padding:1em;
  }

  .scBlockB p {
    padding-top:0.25em;
  }
}

@media screen and (max-width:500px) {
  .scBlockB-warp {
    padding:4px;
    margin-top:1.5em;
    background-size:16px auto;
  }
}


/*-----------------------------------------------------------------------------------
  ①②③...
-----------------------------------------------------------------------------------*/

.scList-no dt {
  counter-increment:list;
  list-style-type:none;
  font-size:125.0%;
  position:relative;
  padding-left:2em;
  margin-top:0.75em;
}

.scList-no dt:before {
  content:counter(list);
  display:inline-block;
  vertical-align:text-bottom;
  width:1.5em;
  height:1.5em;
  line-height:1.5em;
  margin-left:-2.75em;
  margin-right:0.75em;
  font-size:75.0%;
  text-align:center;
  color:#fff;
  background:#aedd8d;
  border:3px solid #aedd8d;
  border-radius:1000%;
}

.scList-no dt:first-child {
  margin-top:0;
}

.scList-no dd {
  padding-left:2.5em;
}

@media screen and (max-width:767px) {  
  .scList-no dd {
    padding-left:0em;
    padding-top:0.25em;
  }
}

@media screen and (max-width:500px) {
  .scList-no dt {
    margin-top:0.5em;
  }
}


/*-----------------------------------------------------------------------------------
  リスト
-----------------------------------------------------------------------------------*/

.scList {
  margin-left:1.25em;
}


/*----------------------------------------------------------------------------------------------------

  白内障手術
  
----------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
  白内障の症状
-----------------------------------------------------------------------------------*/

.sc1Block1-photo {
  line-height:0;
}

.sc1Block1-photo img {
  border-radius:4px;
}

@media screen and (min-width:768px) { 
  .sc1Block1-photo {
    width:350px;
    float:left;
  }
  
  .sc1Block1-txt {
    width:653px;
    float:right;
    padding-top:0.5em;
  }
}

@media screen and (max-width:767px) { 
  .sc1Block1-photo {
    text-align:center;
  }
  
  .sc1Block1-txt {
    padding-bottom:1em;
  }
}

.sc1Block1 .shoujou {
  display:table;
  margin-top:1em;
}

.sc1Block1 .shoujou dt {
  width:155px;
  display:table-cell;
  text-align:center;
  vertical-align:top;
}

.sc1Block1 .shoujou dt span {
  width:130px;
  height:130px;
  border-radius:100%;
  background-color:#f2c73a;
  display:table-cell;
  vertical-align:middle;
  color:#fff;
  font-weight:500;
  font-size:118.8%;
  line-height:1.4;
}

.sc1Block1 .shoujou dd {
  display:table-cell;
  vertical-align:middle;
}

@media screen and (min-width:768px) {
  .sc1Block1 .shoujou {
    width:653px;
    float:left;
    padding-left:30px;
    box-sizing:border-box;
  }
}

@media screen and (min-width:640px) {
  .sc1Block1 .shoujou .scList {
    display:inline-block;
    width:14em;
    vertical-align:bottom;
  }
    
  .sc1Block1 .shoujou .scList + span {
    display:inline-block;
    vertical-align:bottom;
  }
}

@media screen and (max-width:767px) {
  .sc1Block1 .shoujou {
    margin-left:auto;
    margin-right:auto;
    margin-top:1.5em;
  }
  
  .sc1Block1 .shoujou dt {
    width:140px;
  }
  
  .sc1Block1 .shoujou dt span {
    width:120px;
    height:120px;
  }
}

@media screen and (max-width:640px) {  
  .sc1Block1 .shoujou dt {
    width:125px;
  }
  
  .sc1Block1 .shoujou dt span {
    width:110px;
    height:110px;
  }
  
  .sc1Block1 .shoujou .scList {
    margin-bottom:0.5em;
  }
}

@media screen and (max-width:500px) {
  .sc1Block1 .shoujou {
    margin-top:1.25em;
  }
  
  .sc1Block1 .shoujou dt {
    width:115px;
  }
  
  .sc1Block1 .shoujou dt span {
    width:100px;
    height:100px;
  }
}

@media screen and (max-width:420px) {
  .sc1Block1 .shoujou dt {
    width:105px;
  }
  
  .sc1Block1 .shoujou dt span {
    width:90px;
    height:90px;
  }
}

@media screen and (max-width:360px) {
  .sc1Block1 .shoujou dt {
    width:95px;
  }
  
  .sc1Block1 .shoujou dt span {
    width:80px;
    height:80px;
  }
}

.sc1Block1-photo2 {
  list-style:none;
}
  
.sc1Block1-photo2 li {
  vertical-align:top;
  line-height:0;
}
  
.sc1Block1-photo2 li img {
  border-radius:4px;
}

@media screen and (min-width:768px) {
  .sc1Block1-photo2 {
    clear:both;
  }
  
  .sc1Block1-photo2 li {
    width:50%;
    float:left;
    margin-top:30px;
  }
  
  .sc1Block1-photo2 li:last-child {
    text-align:right;
  }
}

@media screen and (max-width:767px) {
  .sc1Block1-photo2 {
    padding-top:0.75em;
  }
  
  .sc1Block1-photo2 li {
    text-align:center;
    margin-top:0.75em;
  }
}

@media screen and (max-width:500px) {
  .sc1Block1-photo2 {
    padding-top:0.25em;
  }
}


/*-----------------------------------------------------------------------------------
  白内障の症状
-----------------------------------------------------------------------------------*/

@media screen and (min-width:768px) {
  .sc1Block2 .scList {
    display:inline-block;
    width:44em;
    vertical-align:bottom;
  }
  
  .sc1Block2 .scList li {
    width:22em;
    float:left;
  }
  
  .sc1Block2 .scList + span {
    display:inline-block;
    vertical-align:bottom;
  }
  
  html.font-large .sc1Block2 .scList + span {
    margin-left:-6.25em;
  }
}

@media screen and (max-width:767px) {
  .sc1Block2 .scList {
    margin-bottom:0.5em;
  }
}


/*-----------------------------------------------------------------------------------
  眼内レンズの種類
-----------------------------------------------------------------------------------*/

.sc1Block4 .photoR450 {
  margin-top:1em;
  margin-bottom:1em;
}

.sc1Block4 .lensHikaku {
  vertical-align:top;
  margin-top:0.25em;
  margin-bottom:1.25em;
}

@media screen and (max-width:767px) {
  .sc1Block4 .lensHikaku {
    margin-top:0.25em;
  }
}


/*-----------------------------------------------------------------------------------
  白内障の治療方法
-----------------------------------------------------------------------------------*/

#hakunaishou .chiryou-warp {
  background-color:#fdf7e2;
  padding-top:50px;
  padding-bottom:50px;
}

#hakunaishou .chiryou {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

#hakunaishou .chiryou--headlineB {
  text-align:center;
  font-weight:500;
  font-size:187.5%;
  margin-top:-10px;
}

#hakunaishou .chiryou_block {
  width:535px;
  float:left;
  background-color:#fff;
  border-radius:4px;
  box-sizing:border-box;
  padding:30px;
}

#hakunaishou .chiryou01 {
  margin-right:30px;
}

#hakunaishou .chiryou--headline {
  text-align:center;
  color:#ed983e;
  font-size:156.2%;
  font-weight:500;
  line-height:1.4;
  padding-bottom:0.5em;
}

#hakunaishou .chiryou--headline:before {
  content:"";
  width:100%;
  height:100px;
  display:block;
  margin-top:0.25em;
  margin-bottom:0.5em;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:contain;
}

#hakunaishou .chiryou01 .chiryou--headline:before { background-image:url(../image/index/hakunaishou-ic01.png); }
#hakunaishou .chiryou02 .chiryou--headline:before { background-image:url(../image/index/hakunaishou-ic02.png); }

@media screen and (min-width:768px) {
  #hakunaishou .chiryou_block {
    margin-top:25px;
  }
}

@media screen and (max-width:767px) {
  #hakunaishou .chiryou-warp {
    padding-top:2em;
    padding-bottom:2em;
  }
  
  #hakunaishou .chiryou--headlineB {
    margin-top:-0.15em;
  }
  
  #hakunaishou .chiryou_block {
    padding:1.25em;
    float:none;
    width:100%;
  }
  
  #hakunaishou .chiryou01 {
    margin-right:0;
    margin-bottom:1.5em;
    margin-top:1.25em;
  }
  
  #hakunaishou .chiryou--headline {
    padding-bottom:0.35em;
  }
  
  #hakunaishou .chiryou_block .sp-none {
    display:none;
  }
}

@media screen and (max-width:640px) {
  #hakunaishou .chiryou--headlineB {
    font-size:175.0%;
  }
}

@media screen and (max-width:500px) {
  #hakunaishou .chiryou-warp {
    padding-top:1.5em;
    padding-bottom:1.5em;
  }
  
  #hakunaishou .chiryou--headlineB {
    margin-top:-0.1em;
  }
  
  #hakunaishou .chiryou_block {
    padding:1em;
  }
  
  #hakunaishou .chiryou01 {
    margin-bottom:1.25em;
    margin-top:1em;
  }
  
  #hakunaishou .chiryou--headline:before {
    height:0;
    padding-top:20%;
  }
}

@media screen and (max-width:420px) {
  #hakunaishou .chiryou--headlineB {
    font-size:168.7%;
  }
}


/*----------------------------------------------------------------------------------------------------

  硝子体手術
  
----------------------------------------------------------------------------------------------------*/

@media screen and (min-width:768px) {
  #shoushitai .headline {
    margin-top:1em;
  }
}

@media screen and (min-width:640px) {
  #shoushitai .headline {
    margin-top:0.5em;
  }
}


/*-----------------------------------------------------------------------------------
  硝子体手術を行う疾患は？
-----------------------------------------------------------------------------------*/

.sc2Block2 .scList {
  margin-bottom:0.5em;
}


/*----------------------------------------------------------------------------------------------------

  緑内障手術
  
----------------------------------------------------------------------------------------------------*/

@media screen and (min-width:768px) {
  #ryokunaishou .headline {
    margin-top:1em;
  }
}

@media screen and (min-width:640px) {
  #ryokunaishou .headline {
    margin-top:0.5em;
  }
}