#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 5005;
  font-size: 1.25rem;
  color: var(--color-white);
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media screen and (max-width: 1280px) {
  #header {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 800px) {
  #header {
    font-size: 0.9375rem;
  }
}
#header.down {
  transform: translate(0, -100%);
}
#header .h_inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--h-wrap);
  height: var(--header-hei);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.9em;
  padding-right: 2em;
  position: relative;
  z-index: 8;
}
@media screen and (max-width: 1280px) {
  #header .h_inner {
    justify-content: space-between;
    align-items: center;
    height: var(--header-hei);
    padding-left: var(--spacing);
    padding-right: var(--spacing);
  }
}
#header .logo {
  transition: opacity 0.35s;
}
#header .logo a {
  display: block;
  width: 9.15em;
}
#header .logo svg {
  width: 100%;
  vertical-align: top;
}
#header .logo .word {
  transition: fill 0.35s;
}
@media screen and (max-width: 1280px) {
  #header .logo a {
    width: 4.7em;
  }
}
#header .mega_logo {
  padding-bottom: 1.2em;
}
#header .mega_logo img {
  display: block;
  height: 1.55em;
}
@media screen and (max-width: 1280px) {
  #header .mega_logo {
    padding-bottom: 0;
  }
  #header .mega_logo img {
    height: 0.7666666667em;
  }
}
#header._fixed + .floating_box .ft_top {
  transform: translate(0);
}

.floating_box {
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 32em;
  right: 0;
  z-index: 1000;
}
.floating_box .find_chemist {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5em;
  height: 5em;
  gap: 0.25em;
  background-color: var(--color-black);
  overflow: hidden;
}
.floating_box .find_chemist::before {
  content: "";
  display: block;
  width: 2.6em;
  height: 2.6em;
  background: var(--color-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52.7 52.7'%3E%3Cpath fill='none' d='M0,0h52.7v52.7H0V0z'/%3E%3Cpath fill='%23fff' stroke='%23111' d='M26.4,4.5c-8.4,0-15.2,6.9-15.1,15.3c0,0,0,0,0,0c0,11.5,15.1,28.4,15.1,28.4s15.1-17,15.1-28.4 C41.5,11.4,34.8,4.6,26.4,4.5C26.4,4.5,26.4,4.5,26.4,4.5z M26.4,25.3c-3,0-5.5-2.4-5.5-5.5s2.4-5.5,5.5-5.5c2.3,0,4.3,1.5,5.1,3.7 c0.2,0.6,0.3,1.2,0.3,1.8C31.8,22.8,29.4,25.3,26.4,25.3z'/%3E%3C/svg%3E%0A") no-repeat center/100% auto;
}
.floating_box .find_chemist .txt {
  color: var(--color-white);
  font-size: 0.8em;
  letter-spacing: -0.4px;
  font-weight: bold;
}
@media screen and (max-width: 1280px) {
  .floating_box .find_chemist {
    width: 2.4em;
    height: 2.4em;
  }
  .floating_box .find_chemist::before {
    width: 100%;
    height: 100%;
    background-size: 72.22% auto;
  }
  .floating_box .find_chemist .txt {
    display: none;
  }
}
.floating_box .ft_top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-black);
  font-size: 0.8em;
  text-align: center;
  letter-spacing: -0.4px;
  height: 2.25em;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #ececec;
  transform: translateY(-100%);
  z-index: 1;
  transition: transform 0.35s, background 0.35s, box-shadow 0.35s;
}
.floating_box .ft_top .inn {
  display: block;
  line-height: 1.2;
  transition: color 0.35s;
}
@media screen and (min-width: 1025px), print {
  .floating_box .ft_top:hover {
    background-color: var(--color-black);
    box-shadow: inset 0 0 0 1px var(--color-black);
  }
  .floating_box .ft_top:hover .inn {
    color: var(--color-white);
  }
}
@media screen and (max-width: 1280px) {
  .floating_box .ft_top {
    font-size: 0.8em;
    width: 3em;
    height: 3em;
  }
}
@media screen and (max-width: 1280px) {
  .floating_box {
    font-size: 1.125rem;
    top: 80%;
    transform: translateY(-60.08%);
  }
}
@media screen and (max-width: 800px) {
  .floating_box {
    font-size: 0.9375rem;
  }
}

#footer {
  position: relative;
  z-index: 10;
  background-color: var(--color-white);
  font-size: 1rem;
}
@media screen and (max-width: 1280px) {
  #footer {
    font-size: 1.125rem;
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    padding-left: var(--spacing);
    padding-right: var(--spacing);
  }
}
@media screen and (max-width: 1024px) {
  #footer {
    padding-top: 2.6666666667em;
    padding-bottom: 3.5em;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 800px) {
  #footer {
    font-size: 0.9375rem;
  }
}

.ft_inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  max-width: var(--f-wrap);
  width: 100%;
  padding-top: 5em;
  padding-bottom: 6.5625em;
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1280px) {
  .ft_inner {
    padding: 0;
  }
}
@media screen and (max-width: 1024px) {
  .ft_inner {
    flex-direction: column-reverse;
  }
}
.ft_logo {
  margin-bottom: 2.5em;
}
.ft_logo img {
  vertical-align: top;
  height: 2.9333333333em;
}
@media screen and (max-width: 1280px) {
  .ft_logo {
    margin-bottom: 1.3333333333em;
  }
  .ft_logo img {
    height: 2.3333333333em;
  }
}
.ft_info {
  font-weight: 400;
}
.ft_info.addr {
  color: #999;
}
.ft_info_item:first-child {
  width: 100%;
}
.ft_info address {
  font-style: normal;
}
.ft_info_box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1em;
  color: #222;
  gap: 1.5em;
  line-height: 1.625;
}
@media screen and (max-width: 1280px) {
  .ft_info_box {
    font-size: 0.8em;
  }
}

.family_wrap {
  font-size: 1rem;
  position: relative;
}
@media screen and (max-width: 1280px) {
  .family_wrap {
    font-size: 0.975rem;
    margin-bottom: 2.6666666667em;
  }
}
@media screen and (max-width: 800px) {
  .family_wrap {
    font-size: 0.8125rem;
  }
}
.family_wrap .family_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  position: relative;
  z-index: 2;
  width: 15em;
  height: 3.5em;
  gap: 1em;
  padding-left: 1.375em;
  padding-right: 1.1875em;
  color: #222;
  font-weight: bold;
  transition: box-shadow 0.25s;
  border: 1px solid #ccc;
}
@media screen and (min-width: 1025px), print {
  .family_wrap .family_btn:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  }
}
@media screen and (max-width: 1024px) {
  .family_wrap .family_btn {
    height: 3.6923076923em;
  }
}
@media screen and (max-width: 800px) {
  .family_wrap .family_btn {
    width: 100%;
  }
}
.family_wrap .family_btn.on::after {
  transform: rotate(180deg);
}
.family_wrap .family_btn.on + .family_lists {
  visibility: visible;
  transform: none;
}
.family_wrap .family_btn::after {
  content: "";
  display: block;
  width: 0.625em;
  height: 0.4375em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10.1 6.8'%3E%3Cpolygon fill='%23111111' points='5.1,6.2 0.4,1.5 1.8,0.1 5.1,3.4 8.4,0.1 9.8,1.5 '/%3E%3C/svg%3E%0A") no-repeat center/100% auto;
}
.family_wrap .family_lists {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 0;
  transition: transform 0.35s;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: #111;
}
.family_wrap .family_lists .family_list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Track */
  /* Handle */
}
.family_wrap .family_lists .family_list::-webkit-scrollbar {
  width: 0.125rem;
}
.family_wrap .family_lists .family_list::-webkit-scrollbar-track {
  background: #1c1c1e;
}
.family_wrap .family_lists .family_list::-webkit-scrollbar-thumb {
  background: var(--color-grey2);
}
.family_wrap .family_lists .family_item:first-child {
  border-top: 0;
}
.family_wrap .family_lists .family_item > a {
  display: flex;
  align-items: center;
  padding: 1.375em 2em;
  width: 100%;
  border-bottom: 1px solid #444;
  color: #fff;
}
.flow_anim:not(.img) {
  opacity: 0;
  transform: translateX(-50px);
  transition: transform 1s cubic-bezier(0.14, 0.68, 0.49, 0.9), opacity 1.25s cubic-bezier(0.14, 0.68, 0.49, 0.9);
  transition-delay: 0.15s;
}
.flow_anim.view {
  opacity: 1;
  transform: translateX(0);
}
.flow_anim.img {
  position: relative;
  overflow: hidden;
}
.flow_anim.img::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  transition: transform 0.75s;
  transition-delay: 0.45s;
}
.flow_anim.img.view::before {
  transform: translateX(100%);
}

html {
  overflow: hidden;
}

body {
  word-break: keep-all;
}
body.fix {
  height: 100vh;
  overflow: hidden !important;
}
#skipNav a {
  position: absolute;
  display: block;
  font-size: 0px;
  top: -9999px;
  left: -9999px;
}
#skipNav a:focus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #333;
  color: #fff;
  font-size: 20px;
  z-index: 9999;
  text-align: center;
}

.layer_pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9005;
  visibility: hidden;
  transition: visibility 0.35s, opacity 0.35s;
  font-size: 1.125rem;
}
@media screen and (max-width: 1280px) {
  .layer_pop {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 800px) {
  .layer_pop {
    font-size: 0.9375rem;
  }
}
.layer_pop.on {
  opacity: 1;
  visibility: visible;
}
.layer_pop .layer_close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 4.4444444444em;
  height: 4.4444444444em;
  background: #111;
}
.layer_pop .layer_close::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath transform='translate(28.778 28.777)' style='fill:none;stroke:%23fff;stroke-width:2px' d='m0 0 24 24'/%3E%3Cpath transform='translate(28.778 28.777)' style='fill:none;stroke:%23fff;stroke-width:2px' d='M24 0 0 24'/%3E%3C/svg%3E%0A") no-repeat center/100% auto;
}
@media screen and (max-width: 1280px) {
  .layer_pop .layer_close {
    width: 3.2em;
    height: 3.2em;
  }
}
.layer_pop .layer_box {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: 38.2222222222em;
  padding-left: 1.3333333333em;
  padding-right: 1.3333333333em;
  transform: translate(-50%, -50%);
  height: auto;
}
@media screen and (max-width: 1024px) {
  .layer_pop .layer_box {
    max-width: 38.2222222222em;
    width: 100%;
    padding-top: 3.0769230769em;
    padding-bottom: 4.6153846154em;
  }
}
@media screen and (max-width: 450px) {
  .layer_pop .layer_box {
    max-width: calc(100% - 1.6em);
  }
}
.layer_pop .inner {
  background-color: var(--color-white);
  max-height: calc(var(--vh, 1vh) * 95);
  width: 100%;
  position: relative;
  display: flex;
  overflow: auto;
}
.layer_pop .btn_box {
  margin-top: 2.2222222222em;
}
@media screen and (max-width: 1280px) {
  .layer_pop .btn_box {
    margin-top: 1.3333333333em;
  }
}
.layer_pop .layer_tit {
  text-align: center;
  font-size: 1.7777777778em;
  margin-bottom: 0.375em;
  width: 100%;
  color: var(--color-black);
}
@media screen and (max-width: 1280px) {
  .layer_pop .layer_tit {
    font-size: 1.3333333333em;
    margin-bottom: 0.15em;
  }
}
.layer_pop .layer_txt {
  font-size: 1.3333333333em;
  text-align: center;
  color: var(--color-grey1);
  margin-bottom: 1.4583333333em;
}
@media screen and (max-width: 1280px) {
  .layer_pop .layer_txt {
    font-size: 1em;
    margin-bottom: 1.1666666667em;
  }
}
.layer_pop .layer_conts {
  background-color: var(--color-white);
  padding: 3.3333333333em 3.3333333333em;
  min-width: 100%;
  height: 100%;
  max-height: 100%;
}
.layer_pop .layer_conts::-webkit-scrollbar {
  width: 0.1875rem;
}
.layer_pop .layer_conts::-webkit-scrollbar-track {
  background: #dddddd;
}
.layer_pop .layer_conts::-webkit-scrollbar-thumb {
  background: var(--font-color-b4);
}
@media screen and (max-width: 1280px) {
  .layer_pop .layer_conts {
    max-height: calc(100% - 6.2857142857em);
    padding: 2em;
  }
}
.layer_pop .find_txt {
  font-size: 1em;
  text-align: center;
  color: var(--color-grey4);
  margin-bottom: 2.4em;
}
@media screen and (max-width: 1280px) {
  .layer_pop .find_txt {
    font-size: 1.0769230769em;
    margin-bottom: 2.0714285714em;
  }
}
.layer_pop .btn_box {
  margin-top: 3.3333333333em;
}
@media screen and (max-width: 1280px) {
  .layer_pop .btn_box {
    margin-top: 1.5384615385em;
    gap: 0.625rem;
  }
  .layer_pop .btn_box .btn {
    width: calc(50% - 0.3125rem);
    max-width: 20.1666666667em;
  }
  .layer_pop .btn_box .btn:first-child:last-child {
    width: 10.0833333333em;
  }
}
.layer_pop .frm_conts {
  display: none;
}
.layer_pop .frm_conts.on {
  display: block;
}

.result_lists {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: 2.4em;
  line-height: 1.333;
}
.result_lists .result_item {
  width: calc(33.3333333333% - 0.6666666667 * 0.35em);
  display: none;
  text-align: center;
}
.result_lists .result_item.on {
  display: block;
}
.result_lists .pdt_img {
  max-width: 100%;
}
.result_lists .pdt_img img {
  vertical-align: top;
  max-width: 100%;
}
.result_lists .pdt_tit {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: -0.6px;
  margin-top: 1.75em;
  margin-bottom: 0.6666666667em;
}
.result_lists .pdt_txt {
  font-size: 0.9em;
  letter-spacing: -0.45px;
  color: var(--color-b2);
}
@media screen and (max-width: 1280px) {
  .result_lists {
    gap: 1.3461538462em 0.3846153846em;
  }
  .result_lists .result_item {
    width: calc(33.3333333333% - 0.6666666667 * 0.3846153846em);
  }
  .result_lists .pdt_img img {
    height: 7.2307692308em;
  }
  .result_lists .pdt_tit {
    font-size: 1.1538461538em;
    margin-top: 0.8333333333em;
    margin-bottom: 0.3666666667em;
  }
  .result_lists .pdt_txt {
    font-size: 0.9230769231em;
  }
}
@media screen and (max-width: 1024px) {
  .result_lists .result_item {
    width: calc(50% - 0.5 * 0.3846153846em);
  }
}

/*# sourceMappingURL=layout.css.map */