﻿@charset "utf-8";

.l-ctVisual {
  background-image:url(../image/ctVisual.jpg);
}

.sec {
  text-align:left;
  counter-reset:s-no;
  counter-reset:list-no;
}

@media print,screen and (min-width:641px) {
  .sec {
    padding-top:80px;
    padding-bottom:100px;
  }
}

@media screen and (max-width:640px) {
  .sec {
    padding-top:2.5em;
    padding-bottom:2.5em;
  }
}

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

  ナビ
  
----------------------------------------------------------------------------------------------------*/

.pgNav {
  padding-top:2em;
}

.pgNav ul {
  list-style:none;
}

.pgNav li:not(:first-child) {
  margin-top:0.5em;
}

.pgNav li {
  position:relative;
  padding-left:3.5rem;
  counter-increment:list-no;
}

.pgNav li:before {
  content:counter(list-no);
  width:2.25rem;
  height:2.25rem;
  line-height:2.25rem;
  text-align:center;
  display:inline-block;
  background-color:#FFAC3A;
  color:#FFF;
  position:absolute;
  left:0;
  top:0.5rem;
  border-radius:50%;
  font-size:70%;
}

.pgNav li a,
.pgNav li a:visited,
.pgNav li a:hover { color:#FF942C; }
.ua-pc .pgNav li a:hover { color:#FFAC3A; }

@media print,screen and (min-width:641px) {
  .pgNav ul {
    float:left;
    display:inline-block;
  }
  
  .pgNav ul:first-of-type {
    padding-right: 80px;
  }
}


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

  症状
  
----------------------------------------------------------------------------------------------------*/

.s-block {
  counter-increment:s-no;
}

.s-hdline {
  color:#684b37;
  line-height:1.4;
  font-weight:500;
  padding-top:0.7em;
  padding-bottom:0.7em;
  margin-bottom:1.5em;
  border-top:4px solid #EADBC9;
  border-bottom:1px solid #EADBC9;
}

.s-hdline .inner {
  display:block;
  position:relative;
  padding-left:4.5rem;
}

.s-hdline .inner:before {
  content:counter(s-no);
  width:3rem;
  height:3rem;
  line-height:3rem;
  text-align:center;
  display:inline-block;
  background-color:#FFAC3A;
  color:#FFF;
  position:absolute;
  left:0;
  border-radius:50%;
  font-size:60%;
}

.s-hdlineS {
  color:#FFF;
  background-color:#FFAC3A;
  line-height:1.4;
  font-weight:500;
  padding:0.6em 0.8em;
  margin-top:2em;
  margin-bottom:1.5em;
}

@media print,screen and (min-width:641px) {
  .s-block {
    padding-top:80px;
  }
  
  .s-hdline .inner:before {
    top:0.3rem;
  }
}

@media screen and (max-width:640px) {
  .s-block {
    padding-top:2.5em;
  }
  
  .s-hdline .inner:before {
    top:0.15rem;
  }
  
  .s-hdlineS {
    font-size:1.11em;
  }
}


/*--------------------------------------------------------------------------------
  主な症状
--------------------------------------------------------------------------------*/

.s-exList {
  padding-left:0.35em;
  margin-bottom:1.5em;
}

.s-exList li:before {
  color:#FFCD3C !important;
}


/*--------------------------------------------------------------------------------
  開閉パネル
--------------------------------------------------------------------------------*/

.s-toggle {
  padding-top:2em;
}

.s-toggle-col:first-of-type {
  border-top:1px solid #EADBC9;
}

.s-toggle-col {
  border-bottom:1px solid #EADBC9;
  padding-top:0.5em;
  padding-bottom:0.5em;
  transition:all 0.2s ease-out;
}

.s-toggle-col .hd {
  font-weight:500;
  color:#FF932C;
  position:relative;
  cursor:pointer;
  transition:all 0.2s ease-out;
}

.s-toggle-col .body {
  background-color:#FEF9E7;
  display:none;
}

.s-toggle-col.is-active {
  padding-top:0.8em;
  padding-bottom:1.5em;
}

.s-toggle-col.is-active .hd {
  padding-bottom:0.8em;
}

.s-toggle-col.is-active .body {
  display:inherit;
}

.s-toggle-col.is-active .body p:not(:first-of-type) {
  padding-top:1em;
}

.s-toggle-col .hd .icon {
  position:absolute;
  right:0.5em;
  top:0.3em;
  line-height:0;
  display:block;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  width:1em;
  height:1em;
  box-sizing:content-box;
}

.s-toggle-col .icon:before,
.s-toggle-col .icon:after {
  content:"";
  display:inline-block;
  width:75%;
  height:2px;
  background:#FF932C;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-webkit-calc(-1 * 2px / 2);
  margin-top:calc(-1 * 2px / 2);
  margin-left:-webkit-calc(-1 * 75% / 2);
  margin-left:calc(-1 * 75%/ 2);
}

.s-toggle-col .icon:after {
  transition:transform 0.2s ease-out;
  transform-origin:center center;
  transform:rotate(90deg) scale(1,1);
}

.s-toggle-col.is-active .icon:after {
  transform:rotate(90deg) scale(0,1);
}

@media print,screen and (min-width:641px) {
  .s-toggle-col .body {
    padding:2em;
  }
}

@media screen and (max-width:640px) {  
  .s-toggle-col .body {
    padding:1.5em;
  }
}


/*--------------------------------------------------------------------------------
  脳神経の種類
--------------------------------------------------------------------------------*/

.noushinkei {
  padding-top:2em;
  padding-bottom:2em;
}

.noushinkeiTbl {
  width:100%;
  border-collapse:separate;
}

.noushinkeiTbl th {
  white-space:nowrap;
}

.noushinkeiTbl thead th {
  background-color:#B58361;
  color:#FFF;
  text-align:center;
  font-weight:500;
  padding-top:0.7em;
  padding-bottom:0.7em;
}

.noushinkeiTbl tbody tr:nth-child(odd) th,
.noushinkeiTbl tbody tr:nth-child(odd) td {
  background-color:#f0edeb;
}

.noushinkeiTbl tbody tr:nth-child(even) th,
.noushinkeiTbl tbody tr:nth-child(even) td {
  background-color:#faf9f9;
}

.noushinkeiTbl th,
.noushinkeiTbl td {
  line-height:1.6;
  vertical-align:middle;
}

.noushinkeiTbl tbody td .w {
  display:inline-block;
}

.noushinkeiTbl thead th:first-child,
.noushinkeiTbl thead th:nth-child(2),
.noushinkeiTbl tbody th,
.noushinkeiTbl tr td:not(:last-child) {
  border-right:0.5em solid #fff;
}

.noushinkeiTbl tbody th {
  text-align:center;
}

.noushinkeiTbl-scr {
  overflow-x:auto;
}

.noushinkeiTbl thead th:first-child,
.noushinkeiTbl tbody th {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  left:0;
}

@media print,screen and (min-width:641px) {  
  .noushinkeiTbl th,
  .noushinkeiTbl td {
    padding:1em;
  }
}

@media screen and (max-width:640px) {
  .noushinkeiTbl {
    min-width:440px;
    font-size:0.88em;
  }
  
  .noushinkeiTbl tbody th .f-nowrap {
    display:block;
  }
  
  .noushinkeiTbl th,
  .noushinkeiTbl td {
    padding:0.75em;
  }
}

@media screen and (max-width:560px) {
  .noushinkeiTbl tbody td {
    font-size:0.9em;
  }
}
