/*

  全体レイアウト

================================================================
*/
#wrapper {
  position: relative;
  max-width: 2000px;
  min-width: 1200px;
  margin: 0 auto;}
.inner {
  position: relative;
  width: 1000px;
  height: 100%;
  margin: 0 auto;}
#container {
  position: relative;}
.pcn {
  display: none;}
.spn {
  display: inline-block;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#wrapper {
  max-width: 100%;
  min-width: 100%;}
.inner {
  width: 100%;}
.pcn {
  display: inline-block;}
.spn {
  display: none;}}

/*

  ヘッダー構成

================================================================
*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1200px;
  height: 90px;
  z-index: 10;}
#header .flex {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;}
#header .flex:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .7);
  z-index: -1;}
#header .flex .left {
  padding-left: 30px;}
#header .logo img {
  width: 300px;
  height: auto;}
/* ------------------------------------------------------- sp */
@media (max-width: 1200px) {
#header .logo img {
  width: 48px;}
}
#header .flex .right {
  display: flex;
  align-items: flex-end;}
#header .flex .right .nav {
  white-space: nowrap;
  display: flex;
  border-bottom: 1px solid #d0c0b4;
  padding-left: 30px;
  font-size: 15px;}
#header .flex .right .nav li {
  width: 150px;
  height: 60px;}
#header .flex .right .nav li.min {
  width: 110px;}
#header .flex .right .nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 30px;
  color: #524343;}
#header .flex .right .nav a span {
  margin-top: 6px;
  font-size: 12px;
  color: #a8755e;
  letter-spacing: .01em;}
#header .flex .right .nav a:before {
  pointer-events: none;
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 1px;
  height: 70px;
  background-color: #d0c0b4;
  transition: .2s;}
#header .flex .right .nav a:hover:before {
  transform: rotate(10deg);}
#header .flex .right .burger .open {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90px;
  aspect-ratio: 1/1;
  background-color: #524343;
  font-size: 13px;
  color: #fff;
  cursor: pointer;}
#header .flex .right .burger .open p {
  pointer-events: none;
  opacity: 1;
  transition: .2s;}
#header .flex .right .burger .open.on p {
  opacity: 0;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#header {
  min-width: 100%;
  height: 17vw;}
#header .flex:after {
  backdrop-filter: blur(5vw);
  background-color: rgba(255, 255, 255, .9);}
#header .flex .left {
  padding-left: 6vw;}
#header .logo img {
  width: 56vw;}
#header .flex .right .nav {
  display: none;}
#header .flex .right .burger .open {
  width: 17vw;
  font-family: "Helvetica Neue";
  font-size: 2.5vw;}
}

/*

  バーガーメニュー構成

================================================================
*/
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .2s;}
.menu-trigger {
  position: relative;
  width: 40px;
  height: auto;
  margin-bottom: 17px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;}
.menu-trigger span:nth-of-type(1) {
  top: 0;}
.menu-trigger span:nth-of-type(2) {
  top: 7px;}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(15px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.menu-trigger {
  width: 8vw;
  margin-bottom: 2.6vw;}
.menu-trigger span:nth-of-type(2) {
  top: 1vw;}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(2vw) rotateZ(-45deg);}
}

/*

  バーガーメニュー内

================================================================
*/
.bmenu {
  display: none;
  position: fixed;
  top: 90px;
  right: 0;
  width: 600px;
  height: calc(100% - 90px);
  border-left: 1px solid #d0c0b4;
  backdrop-filter: blur(5vw);
  background-color: rgba(255, 255, 255, .9);
  z-index: 9;}
.bmenu .box {
  width: 600px;
  height: 100%;
  padding: 30px;
  overflow: scroll;}
.bmenu .tabs {
  overflow: hidden;
  width: 100%;}
.bmenu .tabs .tabflex {
  display: flex;
  align-items: flex-end;
  height: 55px;}
.bmenu .tab_item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50px;
  border-bottom: 2px solid #5ab4bd;
  background-color: #eee;
  text-align: center;
  font-family: nss;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .1em;
  transition: all 0.2s ease;}
.bmenu input[name="tab_item"] {
  display: none;}
.bmenu #symptoms:checked ~ #symptoms_content,
.bmenu #disease:checked ~ #disease_content {
  display: block;}
.bmenu .tabs #symptoms:checked ~ .tabflex #l-symptoms,
.bmenu .tabs #disease:checked ~ .tabflex #l-disease {
  background-color: #5ab4bd;
  color: #fff;}
.bmenu .tabs #symptoms:checked ~ .tabflex #l-symptoms {
  border-top-right-radius: 8px;
  height: 55px;}
.bmenu .tabs #disease:checked ~ .tabflex #l-disease {
  border-top-left-radius: 8px;
  height: 55px;}
.bmenu .tab_content {
  display: none;
  overflow: hidden;}
.bmenu .tab_content ul {
  display: flex;
  flex-wrap: wrap;}
.bmenu .tab_content ul li {
  width: 50%;
  border-bottom: 1px solid #d6d6d6;}
.bmenu .tab_content ul li.bnone {
  border-bottom: none;}
.bmenu .tab_content ul li:nth-child(odd) {
  border-right: 1px solid #d6d6d6;}
.bmenu .tab_content ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-left: 20px;
  transition: .2s;}
.bmenu .tab_content ul li a:hover {
  color: #bb9163;}
.bmenu .other01 {
  margin-top: 30px;}
.bmenu .other01 ul {
  font-size: 15px;}
.bmenu .other01 ul li + li {
 border-top: 1px solid #d6d6d6;}
.bmenu .other01 ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-left: 45px;
  background: url(../img/common/icon_link.svg) no-repeat left 15px center / auto 46%;
  transition: .2s;}
.bmenu .other01 ul li a:hover {
  color: #bb9163;}
#l-symptoms {
  border-radius: 8px 0 0 0;}
#l-disease {
  border-radius: 0 8px 0 0;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.bmenu {
  top: 17vw;
  width: 100%;
  border-top: 1px solid #fff;
  border-left: none;
  height: calc(100% - 17vw);}
.bmenu .box {
  width: 100vw;
  height: 100%;
  padding: 5vw;}
.bmenu .tabs .tabflex {
  height: 13vw;}
.bmenu .tab_item {
  height: 12vw;
  font-size: 4vw;}
.bmenu .tabs #symptoms:checked ~ .tabflex #l-symptoms {
  border-top-right-radius: 2vw;
  height: 13vw;}
.bmenu .tabs #disease:checked ~ .tabflex #l-disease {
  border-top-left-radius: 2vw;
  height: 13vw;}
.bmenu .tab_content ul {
  font-size: 3.3vw;}
.bmenu .tab_content ul li a {
  height: 12vw;
  padding-left: 3.5vw;}
.bmenu .other01 {
  margin-top: 5vw;}
.bmenu .other01 ul {
  font-size: 3.3vw;}
.bmenu .other01 ul li a {
  height: 12vw;
  padding-left: 10.5vw;
  background-position: left 3.5vw center;
  background-size: auto 44%;}
#l-symptoms {
  border-radius: 2vw 0 0 0;}
#l-disease {
  border-radius: 0 2vw 0 0;}
}

/*

  フッター構成

================================================================
*/
#footer {
  overflow: hidden;
  position: relative;
  margin-top: 100px;}
#footer .ftop {
  position: relative;}
#footer .ftop:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 30px;
  left: -500px;
  width: 2000px;
  height: calc(100% - 60px);
  background-color: #dcd0c4;}
#footer .ftop .flex {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;}
#footer .ftop .flex .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 450px;
  height: auto;
  border: 1px solid #dcd0c4;
  padding: 60px 30px 40px;
  background-color: #fff;}
#footer .ftop .flex .left .flogo img {
  width: 300px;
  height: auto;}
#footer .ftop .flex .left table {
  width: 100%;
  margin-top: 30px;
  line-height: 1.7;
  font-size: 15px;}
#footer .ftop .flex .left table tr + tr {
  border-top: 1px solid #dcd0c4;}
#footer .ftop .flex .left table th {
  white-space: nowrap;
  padding: 20px 0;
  vertical-align: top;
  text-align: left;
  font-weight: 500;}
#footer .ftop .flex .left table td {
  padding: 20px 0;
  padding-left: 20px;}
#footer .ftop .flex .left table td .access {
  display: inline-block;
  padding-left: 25px;
  background: url(../img/common/icon_map.svg) no-repeat left center / auto 70%;
  text-decoration: underline;
  transition: .2s;}
#footer .ftop .flex .left table td .access:hover {
  color: #bb9163;}
#footer .ftop .flex .left table td .tel {
  pointer-events: none;}
#footer .ftop .flex .right {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 30px 0;}
.fbottom {
  margin-top: 40px;}
.fbottom .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;}
.fbottom .flex > div {
  margin-top: 40px;}
.fbottom .flex > div:nth-child(-n+3) {
  margin-top: 0;}
.fbottom .flex > div.min {
  width: 240px;}
.fbottom .flex > div.mid {
  width: 300px;}
.fbottom .flex > div.max {
  width: 400px;}
.fbottom .flex > div .block + .block {
  margin-top: 20px;}
.fbottom .flex > div .block .title {
  display: block;
  padding: 15px 0;
  padding-left: 1em;
  border-bottom: 1px solid #dcd0c4;}
.fbottom .flex > div .block a.title {
  padding-left: 30px;
  background: url(../img/common/icon_link.svg) no-repeat left center / auto 45%;
  transition: .2s;}
.fbottom .flex > div .block a.title:hover {
  color: #bb9163;}
.fbottom .flex > div .block .first {
  margin-top: 10px;
  padding-left: calc(1em + 1px);
  font-size: 15px;}
.fbottom .flex > div .block .first > li a {
  display: block;
  padding: 10px 0;
  padding-left: 27px;
  background: url(../img/common/icon_link.svg) no-repeat left center / auto 60%;
  transition: .2s;}
.fbottom .flex > div .block .first > li a:hover {
  color: #bb9163;}
.fbottom .flex > div .block .first > li ul li a {
  background: none;}
.fbottom .flex > div .block .first > li ul li a span {
  position: relative;
  display: inline-block;
  padding-left: 15px;}
.fbottom .flex > div .block .first > li ul li a span:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: #534444;}
.fbottom .flex > div .block .second {
  font-size: 15px;}
.fbottom .flex > div .block .second li + li {
 border-top: 1px solid #d6d6d6; }
.fbottom .flex > div .block .second li a {
  display: block;
  padding: 15px 0;
  padding-left: 1em;
  transition: .2s;}
.fbottom .flex > div .block .second li a:hover {
  color: #bb9163;}
#footer small {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-top: 50px;
  background-color: #524343;
  color: #fff;}
.nolink {
  pointer-events: none;
  opacity: .5;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#footer {
  margin-top: 15vw;}
#footer .ftop {
  padding: 0;
  background-color: #dcd0c4;}
#footer .ftop:after {
  display: none;}
#footer .ftop .flex {
  flex-direction: column;}
#footer .ftop .flex .left {
  width: 100%;
  height: auto;
  border-left: none;
  border-right: none;
  padding: 10vw 0 6vw;}
#footer .ftop .flex .left .flogo img {
  width: 56vw;}
#footer .ftop .flex .left table {
  margin-top: 5vw;
  font-size: 3.3vw;}
#footer .ftop .flex .left table th {
  padding: 3.5vw 0 3.5vw 6vw;}
#footer .ftop .flex .left table td {
  padding: 3.5vw 0;
  padding-left: 5vw;}
#footer .ftop .flex .left table td .access {
  padding-left: 5vw;}
#footer .ftop .flex .left table td .tel {
  pointer-events: auto;}
#footer .ftop .flex .right {
  padding: 0;}
.fbottom {
  margin-top: 10vw;}
.fbottom .flex > div {
  margin-top: 0;}
.fbottom .flex > div.min {
  width: 50%;}
.fbottom .flex > div.mid {
  width: 50%;}
.fbottom .flex > div.max {
  width: 100%;}
.fbottom .flex > div.min.lev2 {
  width: 100%;}
.fbottom .flex > div.mid.lev2 {
  width: 100%;}
.fbottom .flex > div.max.lev2 {
  margin-top: 5vw;}
.fbottom .flex > div:nth-child(-n+2) {
  margin-top: 0;}
.fbottom .flex > div:nth-child(-n+3) {
  margin-top: 3vw;}
.fbottom .flex > div .block + .block {
  margin-top: 20px;}
.fbottom .flex > div .block .title {
  padding: 3vw 0;
  padding-left: 6vw;
  font-size: 3.5vw;}
.fbottom .flex > div .block a.title {
  padding-left: 12vw;
  background-position: left 6vw center;
  background-size: auto 48%;}
.fbottom .flex > div .block .first {
  margin-top: 2vw;
  padding-left: 6vw;
  font-size: 3.3vw;}
.fbottom .flex > div .block .first > li a {
  padding: 2.5vw 0;
  padding-left: 6vw;
  background-size: auto 56%;}
.fbottom .flex > div .block .first > li ul li a span {
  padding-left: 5vw;}
.fbottom .flex > div .block .first > li ul li a span:before {
  top: 1.6vw;
  width: 3vw;}
.fbottom .flex > div .block .second {
  margin-top: 5vw;
  font-size: 3.3vw;}
.fbottom .flex > div .block .second li a {
  padding: 3.8vw 0;
  padding-left: 6vw;}
#footer small {
  align-items: flex-start;
  height: 23vw;
  margin-top: 0;
  padding-top: 3.5vw;
  font-family: "Helvetica Neue";
  font-size: 2.5vw;}
}

/*

  sp CTA

================================================================
*/
#sp-cta {
  display: none;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#sp-cta {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13vw;
  background-color: red;
  z-index: 5;}
#sp-cta .cta {
  margin-top: 0;
  height: 100%;}
#sp-cta .cta a {
  width: 50%;
  height: 100%;
  border-radius: 0;}
#sp-cta .cta a + a {
  margin-left: 0;}
}