@charset "utf-8";

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


  ◇◆◇ トーニチコンタクトレンズ ◇◆◇
  
  
========================================================================================================================*/

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

  写真
  
----------------------------------------------------------------------------------------------------*/

.photo {
  list-style:none;
}

.photo li {
  width:50%;
  box-sizing:border-box;
  float:left;
}

.photo li img {
  border-radius:0.5rem;
}

@media print,screen and (min-width:641px) {
  .photo {
    width:780px;
    margin-left:auto;
    margin-right:auto;
    padding-top:60px;
  }
  
  .photo li:first-child { padding-right:10px; }
  .photo li:last-child { padding-left:10px; }
}

@media screen and (max-width:640px) {
  .photo {
    padding-top:2rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .photo li:first-child { padding-right:0.25rem; }
  .photo li:last-child { padding-left:0.25rem; }
}


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

  住所・TEL
  
----------------------------------------------------------------------------------------------------*/

.ad address { padding-top:1rem; padding-bottom:1.5rem; }
.ad_tel { list-style:none; }

@media print,screen and (min-width:641px) {
  .ad {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    padding-top:60px;
    padding-bottom:60px;
  }
  
  .ad_tel {
    letter-spacing:-1em;
  }
  
  .ad_tel,
  .ad_tel li {
    display:inline-block;
  }
  
  .ad_tel li {
    letter-spacing:normal;
    margin-left:1em;
    margin-right:1em;
  }
}

@media screen and (max-width:640px) {
  .ad {
    padding-top:2rem;
    padding-bottom:1.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .ad_tel li {
    padding-bottom:1rem;
  }
  
  .ad_tel li .l-tel_no:before {
    width:1.6em;
    height:1.6em;
    margin-right:0.25rem;
    background-size:auto 1.2em;
    background-position:right center;
  }
}


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

  営業時間
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .hrs {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:80px;
  }
}

@media screen and (max-width:640px) {
  .hrs {
    padding-bottom:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
}

.hrs .hrsTbl tbody th,
.hrs .hrsTbl tbody td { border-top:0 !important; }
.hrs .hrsTbl tbody th span { font-weight:normal; }
.hrs .hrsTbl tbody td { width:22%; vertical-align:middle; }
.hrs .hrsTbl tbody td:not(:last-child) {
  border-right:1px solid #aae3e8;
}

.hrs ul {
  padding-top:1.25rem;
  margin-left:1.25em;
  text-align:left;
}

.hrs li {
  padding-top:0.75rem;
}


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

  コンタクトレンズ
  
----------------------------------------------------------------------------------------------------*/

.lens {
  background-color:#eef5fc;
}

.lens_ct {
  text-align:left;
}

@media print,screen and (min-width:641px) {
  .lens {
    padding-top:80px;
    padding-bottom:80px;
  }
  
  .lens_ct {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    padding-top:40px;
  }
}

@media screen and (max-width:640px) {
  .lens {
    padding-top:3rem;
    padding-bottom:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .lens_ct {
    padding-top:1.5rem;
  }
}

.lens_ct  .l-annot {
  padding-bottom:1rem;
}

.lens_ct .tr {
  text-align:right;
  padding-bottom:1rem;
}


/*-----------------------------------------------------------------------------------
  カテゴリ
-----------------------------------------------------------------------------------*/

.lensCate {
  border-top:1px solid #76a5d4;
  border-bottom:1px solid #76a5d4;
  line-height:1.5;
}

.lensCate a,
.lensCate a:visited,
.lensCate a:hover,
.ua-pc .lensCate a:hover { text-decoration:none; }

.lensCate ul {
  list-style:none;
}

.lensCate li {
  width:33.33333%;
  float:left;
  text-align:center;
  font-family:"NotoSans";
  font-weight:500;
}

.lensCate li a {
  display:block;
  height:100%;
  box-sizing:border-box;
  padding:1rem;
  position:relative;
}

.lensCate li.active {
  background-color:#5798d9;
}

.lensCate li.active,
.lensCate li.active a,
.lensCate li.active a:visited,
.lensCate li.active a:hover,
.ua-pc .lensCate li.active a:hover { color:#fff; }

.lensCate li a:after {
  border:solid transparent;
  content:"";
  height:0;
  width:0;
  position:absolute;
  bottom:0;
  left:50%;
  border-width:12px;
  margin-left:-12px;
  -webkit-transition:border 0.3s ease, bottom 0.3s ease;
  transition:border 0.3s ease, bottom 0.3s ease;
}

.lensCate li.active a:after {
  bottom:-24px;
  border-top-color:#5798d9;
}

@media print,screen and (min-width:641px) {
  .lensCate {
    margin-top:50px;
    width:980px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media screen and (max-width:640px) {
  .lensCate {
    margin-top:2rem;
  }
}


/*-----------------------------------------------------------------------------------
  表
-----------------------------------------------------------------------------------*/

.lensdataTbl {
  width:100%;
  border-collapse:collapse;
  border:0;
}

.lensdataTbl thead th {
  background-color:#d7e7f8;
  border-left:1px solid #fff;
  text-align:center;
  font-family:"NotoSans";
  font-weight:500;
}

.lensdataTbl tbody th,
.lensdataTbl tbody td {
  background-color:#fff;
  border-left:1px solid #cfdff0;
  border-top:1px solid #cfdff0;
}

.lensdataTbl thead tr th:first-child,
.lensdataTbl tbody th:first-child {
  border-left:0;
}

.lensdataTbl tbody tr:first-child th,
.lensdataTbl tbody tr:first-child td {
  border-top:0;
}

.lensdataTbl th,
.lensdataTbl td {
  line-height:1.4;
  padding:1rem;
}

.lensdataTbl tbody th {
  font-weight:normal;
  white-space:nowrap;
}

@media screen and (max-width:640px) {
  .lensdataTbl {
    min-width:640px;
  }
}