@charset "utf-8";

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


  ◇◆◇ トップページ ◇◆◇
  
  
========================================================================================================================*/

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

  header
  
----------------------------------------------------------------------------------------------------*/

header {
  width:100%;
}

@media print,screen and (min-width:641px) {
  header {
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    padding-left:20px;
    padding-right:100px;
    box-sizing:border-box;
  }
}


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

  hero
  
----------------------------------------------------------------------------------------------------*/

#mainVisual {
  background-image:url(../image/hd_bg.jpg);
  background-position:center top;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}

#mainVisual_slider {
  list-style:none;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
}

@media print,screen and (min-width:641px) {
  #mainVisual {
    height:800px;
  }
  
  #mainVisual_slider {
    width:1400px;
    margin-left:-40px;
    background:url(../image/top/visual/bg.png) no-repeat center top;
    background-size:cover;
  }
  
  #mainVisual_slider li img { display:none; }
  
  #mainVisual_slider li {
    height:610px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
  }
  
  #mainVisual_slider li.visual01 { background-image:url(../image/top/visual/01.png?v=2); }
  #mainVisual_slider li.visual02 { background-image:url(../image/top/visual/02.png?v=2); }
}

@media screen and (max-width:640px) {
  #mainVisual {
    height:0;
    padding-top:90%;
    background-size:cover;
  }
  
  #mainVisual_slider {
    width:100%;
    background:url(../image/top/visual/bg_sp.png) no-repeat center top;
    background-size:cover;
  }
}


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

  お知らせ
  
----------------------------------------------------------------------------------------------------*/

.info_list,
.info_error {
  box-sizing:border-box;
  text-align:left;
}
  
.info_list { list-style:none; }

.info_list li {
  border-bottom:1px solid #dcdee2;
  line-height:1.6;
}

.info_list li a,
.info_list li .inner {
  display:block;
  padding:0.75em 1em 1em 0;
}

.info_list li a:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.info_list li .date {
  width:10em;
  display:inline-block;
  float:left;
  clear:both;
  margin-right:-10em;
  padding-left:1em;
  color:#3c3c3c;
}

.info_list li .title {
  display:block;
  padding-left:10em;
}

@media print,screen and (min-width:641px) {
  #info {
    width:100%;
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
    padding-top:80px;
    padding-bottom:80px;
    position:relative;
    display:table;
  }
  
  .info_hd {
    width:200px;
    display:table-cell;
    vertical-align:top;
    text-align:center;
    box-sizing:border-box;
  }
  
  .info_list,
  .info_error {
    width:720px;
    display:table-cell;
    vertical-align:top;
    padding-left:60px;
    padding-top:0.25em;
  }
  
  .info_error { padding-top:0.65em; }

  #info .l-btn {
    width:200px;
    padding-left:1rem;
    padding-right:1rem;
    position:absolute;
    left:0;
    top:5em;
    margin-top:80px;
    box-sizing:border-box;
  }
}

@media screen and (max-width:640px) {
  #info {
    padding-left:1rem;
    padding-right:1rem;
    padding-top:3rem;
    padding-bottom:2.5rem;
  }
  
  .info_hd { padding-bottom:1rem; }
  
  .info_list,
  .info_error {
    padding-bottom:2rem;
  }
  
  .info_error {
    padding-top:0.5rem;
    text-align:center;
  }
}


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

  手術を受ける方へ
  
----------------------------------------------------------------------------------------------------*/

#ope {
  background:url(../image/top/ope_bg.png) no-repeat center top;
  background-color:#dfecf9;
}

.ope_ct {
  max-width:872px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.ope__box {
  float:left;
  box-sizing:border-box;
  position:relative;
  border-radius:0 0 2rem 0;
}

.ope__box_in {
  border-radius:0 0 2rem 0;
  box-sizing:border-box;
  background-color:#fff;
}

.ope__box .photo {
  display:block;
  position:relative;
}

.ope_ct p {
  text-align:left;
  position:relative;
  z-index:2;
}

.ope_ct p .l-ar {
  width:1.5em;
  height:1.5em;
  position:absolute;
}

@media print,screen and (min-width:641px) {
  #ope {
    padding-top:80px;
    padding-bottom:80px;
    background-size:2000px auto;
  }
  
  .ope_ct { padding-top:50px; }
  
  .ope__box a {
    width:160px;
    height:160px;
    margin-top:-60px;
    font-size:112.5%;
    -webkit-transition:background 0.2s ease;
    transition:background 0.2s ease;
  }

  body.font-large .ope__box a {
    width:170px;
    height:170px;
  }
  
  .ope__box:hover a {
    background-color:#4cc5cf;
  }
  
  .ope__box {
    width:50%;
    padding:0 6px;
    -webkit-backface-visibility:hidden;
    -ms-interpolation-mode:bicubic;
    -webkit-transition:transform 0.3s ease;
    transition:transform 0.3s ease;
  }
  
  .ua-pc .ope__box:hover {
    -webkit-transition:scale(1.05);
    transform:scale(1.05);
    z-index:2;
  }
  
  .ope__box_in {
    -webkit-backface-visibility:hidden;
    -ms-interpolation-mode:bicubic;
    -webkit-transition:box-shadow 0.2s ease;
    transition:box-shadow 0.2s ease;
  }
  
  .ua-pc .ope__box:hover .ope__box_in {
    box-shadow:0 0 10px rgba(0,0,0,0.1);
  }

  .ope__box a,
  .ope__box a:visited,
  .ope__box a:hover { color:#fff; text-decoration:none; }
  
  .ope__box a {
    text-align:center;
    display:inline-block;
    background-color:#5596d7;
    border-radius:50%;
    line-height:1.3;
    border:4px solid #fff;
    box-sizing:border-box;
    position:relative;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
  }
  
  .ope__box a b {
    font-family:"NotoSans";
    font-weight:500;
    width:100%;
    display:inline-block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }

  .ope_ct p {
    padding:0.5rem 1.5rem 3.75rem 1.5rem;
  }

  .ope_ct p .l-ar {
    right:1.5rem;
    bottom:1.5rem;
  }
}

@media screen and (max-width:640px) {
  #ope {
    padding-top:3rem;
    padding-bottom:2.5rem;
    background-size:170% auto;
  }
  
  .ope_ct {
    padding-left:0.5rem;
    padding-right:0.5rem;
    padding-top:2rem;
  }
  
  .ope__box {
    width:100%;
    padding-left:0.5rem;
    padding-right:0.5rem;
  }
  
  .ope__box:nth-child(n+2) {
    margin-top:1.5rem;
  }
  
  .ope__box .photo {
    width:100%;
    height:220px;
    overflow:hidden;
  }

  .ope__box .photo img {
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
  }

  .ope__box a,
  .ope__box a:visited,
  .ope__box a:hover { color:#1b69b8; text-decoration:none; }
  
  .ope__box a {
    display:inline-block;
    line-height:1.3;
    text-align:center;
    box-sizing:border-box;
    padding:1em 2em;
    margin-top:-1.5em;
    z-index:2;
    border-top:3px solid #1b69b8;
    border-bottom:3px solid #1b69b8;
    background-color:#fff;
    position:relative;
  }
  
  .ope__box a br { display:none; }
  
  .ope__box a b {
    font-family:"NotoSans";
    font-weight:500;
    font-size:125%;
  }
  
  .ope_ct p {
    padding:1.25rem 1.25rem 3.75rem 1.25rem;
  }

  .ope_ct p .l-ar {
    right:1.25rem;
    bottom:1.25rem;
  }
}


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

  診療時間
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  #hrs .j-responTable {
    margin-top:50px;
  }
}

@media screen and (max-width:640px) {
  #hrs { padding-top:3rem; }
  #hrs .j-responTable { margin-top:2rem; }
}


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

  ctNav
  
----------------------------------------------------------------------------------------------------*/

#ctNav {
  background-color:#dfecf9;
}
  
#ctNav_slider .slick-list {
  overflow:visible !important;
}

#ctNav_slider {
  list-style:none;
  display:inline-block;
  letter-spacing:-1rem;
}
  
#ctNav_slider li a,
#ctNav_slider li a:visited,
#ctNav_slider li a:hover { color:#1b69b8; text-decoration:none; }

#ctNav_slider li.contactuser a { background-image:url(../image/top/ctNav_p01.jpg); }
#ctNav_slider li.doctor a { background-image:url(../image/top/ctNav_p02.jpg?v=2); }
#ctNav_slider li.faq a { background-image:url(../image/top/ctNav_p03.jpg); }

#ctNav_slider li {
  box-sizing:border-box;
  border-radius:50%;
  display:inline-block;
  letter-spacing:normal;
  vertical-align:top;
  position:relative;
}
  
#ctNav_slider li a {
  border:6px solid #b5d3f1;
  height:100%;
  box-sizing:content-box;
  border-radius:50%;
  display:block;
  overflow:hidden;
  position:relative;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:contain;
}
  
#ctNav_slider li b {
  font-family:"NotoSans";
  font-weight:500;
  width:100%;
  display:block;
  background-color:#fff;
  position:absolute;
  left:0;
  bottom:0;
  line-height:1.3;
  box-sizing:border-box;
  box-shadow:0 -6px 12px -6px rgba(0,0,0,0.05);
  text-align:center;
}
  
#ctNav_slider li .l-ar {
  width:2.4rem;
  height:2.4rem;
  background-size:50% auto;
  position:absolute;
  background-color:#5596d7;
  border:4px solid #fff;
  box-sizing:content-box;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
}

@media print,screen and (min-width:641px) {
  #ctNav {
    padding-top:80px;
    padding-bottom:80px;
    overflow:hidden;
  }
  
  #ctNav_slider {
    min-width:1200px;
  }
  
  #ctNav_slider li {
    width:340px;
    height:340px;
    margin:0 20px;
  }
  
  #ctNav_slider li b {
    height:120px;
    font-size:125%;
    padding:1.25rem 1rem;
  }
  
  #ctNav_slider li.doctor b,
  #ctNav_slider li.faq b { padding-top:1.75rem; }
    
  #ctNav_slider li.contactuser b { font-size:118.8%; }
  #ctNav_slider li.contactuser b span { font-size:87.5%; }
  
  #ctNav_slider li .l-ar { right:60px; bottom:-10px; }
  
  #ctNav_slider li,
  #ctNav_slider li a,
  #ctNav_slider li b {
    -webkit-backface-visibility:hidden;
    -ms-interpolation-mode:bicubic;
  }
  
  body.font-large #ctNav_slider li.contactuser b { padding-top:1rem; }
  body.font-large #ctNav_slider li.contactuser b span { font-size:81.3%; }
  
  #ctNav_slider li {
    -webkit-transition:transform 0.3s ease;
    transition:transform 0.3s ease;
  }
  
  .ua-pc #ctNav_slider li:hover {
    -webkit-transition:scale(1.05);
    transform:scale(1.05);
  }
  
  #ctNav_slider li a {
    -webkit-transition:box-shadow 0.2s ease, border 0.2s ease;
    transition:box-shadow 0.2s ease, border 0.2s ease;
  }
  
  .ua-pc #ctNav_slider li:hover a {
    border-color:#5596d7;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
  }
  
  #ctNav_slider li b {
    -webkit-transition:background 0.2s ease, color 0.2s ease;
    transition:background 0.2s ease, color 0.2s ease;
  }
  
  .ua-pc #ctNav_slider li:hover b {
    background-color:#5596d7;
    color:#fff;
  }
  
  #ctNav_slider li .l-ar {
    -webkit-transition:background 0.2s ease;
    transition:background 0.2s ease;
  }
  
  .ua-pc #ctNav_slider li:hover .l-ar { 
    -webkit-transition:scale(1.05);
    transform:scale(1.05);
    background-image:url(../image/icon/ar_blue.svg);
    background-color:#fff;
    background-size:46% auto;
    -webkit-background-clip:border-box;
    background-clip:border-box;
  }
  .ua-pc.no-svg #ctNav_slider li:hover .l-ar { background-image:url(../image/icon/ar_blue.png); }
}

@media print,screen and (min-width:1261px) {
  #ctNav_slider {
    min-width:1200px;
  }
  
  #ctNav_slider li {
    width:340px;
    height:340px;
    margin:0 30px;
  }
  
  #ctNav_slider li b {
    height:120px;
    font-size:125%;
    padding:1.25rem 1rem;
  }
}

@media screen and (max-width:640px) {
  #ctNav {
    padding:2.5rem 0;
    overflow:hidden;
  }
  
  #ctNav .j-responBlock {
    width:600px;
    margin-left:-25%;
  }
  
  #ctNav .responBlock {
    width:600px;
  }
  
  #ctNav_slider li {
    text-align:center;
  }
  
  #ctNav_slider li a {
    width:260px !important;
    height:260px !important;
    margin-left:auto;
    margin-right:auto;
  }
  
  #ctNav_slider li b {
    height:90px;
    font-size:112.5%;
    padding:0.75rem 1rem;
  }
  
  #ctNav_slider li.doctor b,
  #ctNav_slider li.faq b { padding-top:1.25rem; }
    
  #ctNav_slider li.contactuser b { font-size:100%; }
  #ctNav_slider li.contactuser b span { font-size:75%; }
  
  #ctNav_slider li .l-ar { right:50px; bottom:0; }
 
  #ctNav_dots { padding-top:0.75rem; }
}


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

  トーニチコンタクトレンズ
  
----------------------------------------------------------------------------------------------------*/

.tonichi_ct {
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.tonichi_photo .p01,
.tonichi_photo .p02 {
  display:block;
  box-sizing:border-box;
}

.tonichi_photo img {
  border-radius:0.5rem;
}

.tonichi_ct address {
  margin-top:1.5rem;
  margin-bottom:1.25rem;
}

.tonichi_ct .l-btn {
  margin-top:2rem;
}
  
@media print,screen and (min-width:641px) {
  #tonichi {
    padding-top:80px;
    padding-bottom:80px;
  }
    
  .tonichi_ct {
    position:relative;
    margin-top:50px;
  }
  
  .tonichi_ct .p01,
  .tonichi_ct .p02 {
    position:absolute;
    bottom:0;
    width:30%;
  }
  
  .tonichi_photo .p01 { left:0; }
  .tonichi_photo .p02 { right:0; }

  .tonichi_logo { width:120px; }

  .tonichi_ct .l-btn {
    padding-left:1.75em;
    padding-right:1.75em;
  }
}

@media screen and (max-width:640px) {
  #tonichi {
    padding-top:3rem;
    padding-bottom:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .tonichi_ct {
    margin-top:2rem;
  }
  
  .tonichi_photo { margin-left:-0.5rem; }

  .tonichi_photo .p01,
  .tonichi_photo .p02 {
    width:50%;
    float:left;
    padding-left:0.5rem;
  }

  .tonichi_logo {
    width:140px;
    margin-top:-2.5rem;
  }
}


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

  医院案内
  
----------------------------------------------------------------------------------------------------*/

#guide {
  background-color:#f8f8f9;
}

.guide_ct {
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

#guide .gmap {
  border-radius:0.5rem;
  overflow:hidden;
}
  
#guide .gmap iframe { width:100%; height:100%; vertical-align:bottom; }

#guide .clinic_photo { border-radius:0.5rem; }
#guide .clinic_logo { width:330px; }
#guide .clinic address { padding-top:1.5rem; padding-bottom:1rem; }

#guide .clinic_pt {
  font-size:75%;
  padding-top:2rem;
  list-style:none;
  letter-spacing:-1rem;
}

#guide .clinic_pt li {
  width:110px;
  height:110px;
  display:inline-block;
  letter-spacing:normal;
  background-color:#ffe762;
  border-radius:50%;
  box-sizing:border-box;
  position:relative;
  margin:0 0.65rem;
  line-height:1.4;
}

#guide .clinic_pt li span {
  width:100%;
  display:inline-block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

@media print,screen and (min-width:641px) {
  #guide {
    padding-top:80px;
    padding-bottom:80px;
  }
  
  #guide .gmap {
    width:60%;
    height:650px;
    float:left;
  }
  
  #guide .clinic {
    width:35%;
    float:right;
  }
  
  #guide .clinic_photo { margin-bottom:50px; }
}

@media screen and (max-width:640px) {
  #guide {
    padding-top:2.5rem;
    padding-bottom:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  
  #guide .gmap {
    width:100%;
    height:500px;
    margin-top:2rem;
  }
  
  #guide .clinic_photo { margin-bottom:2rem; }
  #guide .clinic address { padding-bottom:1.5rem; }
}