@charset "UTF-8";
/*
Theme Name:phytoec
*/
/*html {
  visibility: hidden;
}
html.wf-active, html.loading-delay {
  visibility: visible;
}*/
body, html {
  font-family: 'EB Garamond',YakuHanJP, "A1明朝", "A1 Mincho","游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #d1d0cc; }

html {
  font-size: 62.5%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.05em; }

body {
  animation: fadein 3s forwards; }

@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
a {
  color: #d1d0cc; }
  a:hover, a:focus {
    color: white;
    text-decoration: none; }

h2 {
  font-weight: normal; }

/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-feature-settings: "palt";
  box-sizing: border-box;
  font-weight: normal; }

body {
  line-height: 1;
  background-color: #232323; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

@media screen and (min-width: 768px) {
  .sp-only {
    display: none; } }

.pc-only {
  display: none; }
  @media screen and (min-width: 1024px) {
    .pc-only {
      display: inline; } }

@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none; } }
a, a span, .toggle_btn {
  transition: all 0.5s ease 0s; }

.f10 {
  font-size: 10px; }

.f11 {
  font-size: 11px; }

.f12 {
  font-size: 12px; }

.f13 {
  font-size: 13px; }

.f14 {
  font-size: 14px; }

.f15 {
  font-size: 15px; }

.f16 {
  font-size: 16px; }

.f17 {
  font-size: 17px; }

.f18 {
  font-size: 18px; }

.f19 {
  font-size: 19px; }

.f20 {
  font-size: 20px; }

.ls05 {
  letter-spacing: .05em; }

.ls1 {
  letter-spacing: .1em; }

.lh2 {
  line-height: 2; }

.mar-top10 {
  margin-top: 1em !important; }

.mar-top20 {
  margin-top: 2em !important; }

.mar-top30 {
  margin-top: 3em !important; }

.mar-top80 {
  margin-top: 8em !important; }

main {
  background-color: #232323;
  background: linear-gradient(90deg, rgba(34, 34, 34, 1), rgba(54, 54, 54, 1));
  background: linear-gradient(90deg, rgba(34, 34, 34, 1), rgba(54, 54, 54, 1)); }

.original-gradient {
  height: 200px;
  width: 90%;
  background-image: linear-gradient(90deg, #363636, #222222); }

.fd {
  opacity: 0;
  will-change: transform;
  transition-duration: .5s; }

.no, .no2 {
  width: 100px;
  position: absolute;
  animation: no 10s cubic-bezier(0.18, 0.06, 0.23, 1) 0s normal infinite;
  will-change: opacity; }
  @media screen and (min-width: 1024px) {
    .no, .no2 {
      width: 180px; } }
  .no img, .no2 img {
    width: 100%;
    height: auto;
    -webkit-animation: vibrate-1 6s linear infinite both;
    animation: vibrate-1 6s linear infinite both; }

@keyframes no {
  0% {
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem); }
  50% {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem); }
  100% {
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem); } }
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0); }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px); }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px); }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px); }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px); }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0); } }
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0); }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px); }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px); }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px); }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px); }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0); } }
/*top*/
#top {
  height: 100vh; }
  #top .top-bg {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: -2; }

.top-logo {
  height: 100vh;
  width: 60vw;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px; }
  .top-logo img {
    width: 100%;
    height: auto; }

.top {
  position: relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 100vh;
  /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  margin: 0;
  padding: 0; }
  .top li {
    width: 100%;
    /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh;
    /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat !important;
    /*背景画像をリピートしない*/
    background-position: center !important;
    /*背景画像の位置を中央に*/
    background-size: cover !important;
    /*背景画像が.slider-item全体を覆い表示*/
    margin: 0;
    padding: 0;
    background-attachment: fixed; }
    .top li.img01 {
      background: url("https://phyto62.com/ec/images/top1_sp.webp"); }
      @media screen and (min-width: 1024px) {
        .top li.img01 {
          background: url("https://phyto62.com/ec/images/top1_pc.webp"); } }
    .top li.img02 {
      background: url("https://phyto62.com/ec/images/top2_sp.webp"); }
      @media screen and (min-width: 1024px) {
        .top li.img02 {
          background: url("https://phyto62.com/ec/images/top2_pc.webp"); } }

.top-text {
  display: flex;
  flex-direction: column;
  align-items: center; }

.top {
  opacity: 0;
  transition: opacity 2s linear; }
  .top.slick-initialized {
    opacity: 1; }

/* menu */
.header {
  position: fixed;
  width: 100%;
  z-index: 10; }

/*　上に上がる動き　*/
.header-inner-wrap.UpMove {
  animation: UpAnime 0.5s forwards; }

@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 0;
    transform: translateY(-100px); } }
/*　下に下がる動き　*/
.header-inner-wrap.DownMove {
  animation: DownAnime 0.5s forwards; }

@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.logo {
  position: relative;
  z-index: 2;
  width: 30vw;
  max-width: 200px;
  display: none;
  margin-top: .5em; }
  .logo img {
    width: 100%;
    height: auto; }
  .logo.UpMove {
    display: none; }
  .logo.DownMove {
    display: block; }
  .logo.none {
    display: none; }

.submenu {
  position: fixed;
  right: .5em;
  top: .5em;
  z-index: 9;
  display: flex; }
  @media screen and (min-width: 1024px) {
    .submenu {
      right: 3em; } }
  .submenu li {
    list-style: none;
    padding-bottom: 0.5em;
    padding-top: 0.5em; }
    .submenu li a {
      color: white;
      text-decoration: none;
      padding: 0 .8em;
      display: flex;
      align-items: center; }
      .submenu li a img {
        width: 30px;
        height: 30px;
        margin-bottom: .5em; }

.header-inner {
  display: flex;
  justify-content: space-between;
  padding: 9px 15px; }
  .header-inner .header-inner-wrap {
    width: 100%;
    display: flex;
    justify-content: center; }

.menu-wrapper {
  position: relative; }

.btn-nav {
  display: block;
  width: 39px;
  height: 45px;
  position: fixed;
  left: 5px;
  top: 10px;
  z-index: 999;
  background-color: transparent;
  cursor: pointer;
  border: none; }
  .btn-nav:hover {
    background-color: transparent; }
  @media screen and (min-width: 500px) {
    .btn-nav {
      left: 2em;
      top: 1em; } }

.bar {
  width: 19px;
  height: 2px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: white; }

.bar-top {
  top: 10px;
  width: 19px; }

.bar-bottom {
  bottom: 19px; }

.btn-nav.close .bar-top {
  transform: translate(-50%, 15px) rotate(45deg);
  transition: transform .3s;
  background-color: white;
  width: 19px;
  top: 1px; }

.btn-nav.close .bar-bottom {
  transform: translate(-50%, -8px) rotate(-45deg);
  transition: transform .3s;
  background-color: white; }

.menu-lists {
  display: none;
  background-color: rgba(74, 67, 67, 0.97);
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 50px;
  width: 100%;
  height: 100vh; }
  .menu-lists div.menu-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    padding-bottom: 10em; }
    .menu-lists div.menu-wrap .contact-btn {
      width: 60vw;
      max-width: 300px; }
    .menu-lists div.menu-wrap ul.nav {
      text-align: center; }
      .menu-lists div.menu-wrap ul.nav li {
        opacity: 0;
        animation-name: anime;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        margin-top: 0.5em;
        margin-bottom: 0.5em; }
        .menu-lists div.menu-wrap ul.nav li:first-of-type {
          animation-delay: 0; }
        .menu-lists div.menu-wrap ul.nav li:nth-of-type(2) {
          animation-delay: .1s; }
        .menu-lists div.menu-wrap ul.nav li:nth-of-type(3) {
          animation-delay: .2s; }
        .menu-lists div.menu-wrap ul.nav li a {
          text-decoration: none;
          font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.25rem);
          line-height: 1.85;
          letter-spacing: 0.1em;
          color: white;
          font-weight: normal;
          font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; }
          .menu-lists div.menu-wrap ul.nav li a:hover {
            color: #B99b00; }
          .menu-lists div.menu-wrap ul.nav li a span {
            font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); }
@keyframes anime {
  0% {
    opacity: 0;
    transform: translateY(60px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
.sns {
  opacity: 0;
  animation-name: anime;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  margin-top: 2em;
  display: flex;
  justify-content: space-around;
  width: 40%;
  list-style: none; }
  .sns .sns-btn {
    height: 22px;
    width: auto; }

.slick-slider {
  font-size: 0; }

/* about */
.co-photo2 {
  width: 80vw;
  margin-top: 3em; }
  @media screen and (min-width: 1024px) {
    .co-photo2 {
      display: flex;
      justify-content: space-between;
      flex-direction: row-reverse;
      align-items: center; } }
  @media screen and (min-width: 1024px) {
    .co-photo2 picture {
      max-width: 45%; } }
  .co-photo2 picture img {
    width: 100%;
    height: auto; }

#about {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: .5em;
  padding-bottom: 3em;
  position: relative; }
  #about p {
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    line-height: clamp(2rem, calc( (0.79rem + 0.11vw) * 2 ), 3rem);
    margin-top: 1.5em; }
    @media screen and (min-width: 1024px) {
      #about p {
        margin-top: inherit;
        margin-right: 3em; } }

.tisane-photo {
  width: 100%;
  margin-top: 3em; }
  .tisane-photo img {
    width: 100%;
    height: auto; }

/* tisanes */
#tisanes {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 3em;
  padding-bottom: 3em;
  position: relative; }
  #tisanes h2 {
    font-size: clamp(1rem, 0.545rem + 2.27vw, 2.25rem);
    display: inline-block;
    padding-bottom: .1em;
    margin-bottom: .5em;
    margin-top: 1em;
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    align-self: flex-start;
    overflow: hidden; }
    #tisanes h2 .fd {
      display: block; }
      #tisanes h2 .fd span {
        font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
        padding-left: 2em; }
  #tisanes .ti-text {
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    line-height: clamp(2rem, calc( (0.79rem + 0.11vw) * 2 ), 3rem); }

.inner-box {
  width: 90%; }
  @media screen and (min-width: 1024px) {
    .inner-box {
      width: 80%; } }

.ti-box {
  display: flex;
  flex-direction: column;
  align-items: center; }
  @media screen and (min-width: 1024px) {
    .ti-box {
      flex-direction: row;
      margin-bottom: 2em; }
      .ti-box .inner-box {
        margin-left: 3em;
        margin-right: 10%; } }

.items-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (min-width: 1024px) {
    .items-list::after {
      display: block;
      content: "";
      width: 22%; } }
  @media screen and (min-width: 1024px) {
    .items-list::before {
      display: block;
      content: "";
      width: 22%;
      order: 1; } }
  .items-list .item-box {
    margin-top: 2em;
    width: 47%; }
    @media screen and (min-width: 1024px) {
      .items-list .item-box {
        width: 22%; } }
    .items-list .item-box picture img {
      width: 100%;
      height: auto; }
    .items-list .item-box .item-description h3 {
      font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
      font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.25rem);
      line-height: clamp(.6rem, calc( (0.6rem + 0.11vw) * 2 ), 3rem);
      margin-top: .2em;
      margin-bottom: .1em; }
    .items-list .item-box .item-description p {
      font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
      line-height: 2; }

.view-more {
  margin-top: 2em; }
  @media screen and (min-width: 1024px) {
    .view-more {
      margin-top: 3em;
      max-width: 400px; } }
  .view-more a {
    display: block;
    border: 1px solid #999999;
    color: white;
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-style: italic;
    text-decoration: none;
    border-radius: 9999px;
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    padding: 1em 2.5em;
    text-align: center; }
    @media screen and (min-width: 1024px) {
      .view-more a {
        padding: 1.2em 7.5em; } }
    .view-more a:hover {
      background-color: #DED5D6;
      color: #232323; }

/* consultation */
#consultation {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 3em;
  padding-bottom: 3em;
  background-color: #333; }
  #consultation .co-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%; }
    @media screen and (min-width: 1024px) {
      #consultation .co-box {
        flex-direction: row-reverse;
        width: 80%; } }
    #consultation .co-box p {
      font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
      line-height: clamp(2rem, calc( (0.79rem + 0.11vw) * 2 ), 3rem); }
      @media screen and (min-width: 1024px) {
        #consultation .co-box p {
          margin-right: 3em; } }
  #consultation .consultation-photo img {
    width: 100%;
    height: auto; }
  #consultation h2 {
    font-size: clamp(1rem, 0.545rem + 2.27vw, 2.25rem);
    display: inline-block;
    margin-bottom: 1em;
    color: white;
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    margin-top: 1em;
    overflow: hidden; }
    #consultation h2 .fd {
      display: block; }
      #consultation h2 .fd span {
        font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
        padding-left: 2em; }

.view-more2 {
  margin-top: 2em;
  position: relative; }
  .view-more2 a {
    display: block;
    color: white;
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-style: italic;
    text-decoration: none;
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    padding: 1em 2.5em; }
  .view-more2::before {
    content: '';
    display: block;
    position: absolute;
    top: 1.1em;
    left: 0;
    background: url("https://phyto62.com/ec/images/arrow.svg") no-repeat;
    width: 19px;
    height: 8px; }

/* detail */
#detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5em; }
  #detail .bread {
    width: 90%;
    font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
    margin-bottom: 1.5em; }
    @media screen and (min-width: 768px) {
      #detail .bread {
        width: 80%; } }
    #detail .bread a {
      color: white;
      text-decoration: none; }
  #detail .detail-wrap {
    width: 90%;
    padding-bottom: 3em; }
    @media screen and (min-width: 768px) {
      #detail .detail-wrap {
        width: 80%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 6em; } }
    @media screen and (min-width: 768px) {
      #detail .detail-wrap .detail-text-wrap {
        margin-left: 2em;
        flex-basis: 45%;
        min-width: 200px; } }
    #detail .detail-wrap .detail-text-wrap select {
      background-color: #c3c3bf;
      color: #303030;
      border: none; }
    #detail .detail-wrap h1 {
      font-size: clamp(1.5rem, 1.405rem + 0.48vw, 2rem);
      margin-top: 1em; }
      #detail .detail-wrap h1 span {
        font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
        display: block;
        margin-top: 1em; }
    #detail .detail-wrap h2 {
      font-size: clamp(1rem, 0.929rem + 0.36vw, 1.375rem);
      margin-top: 1.7em; }
    #detail .detail-wrap .de-text {
      font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
      margin-top: 1em;
      line-height: 1.7;
      font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; }
    #detail .detail-wrap .de-text2 {
      font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
      margin-top: 1em;
      line-height: 1.7;
      margin-bottom: 1em; }
      #detail .detail-wrap .de-text2 ul {
        margin-left: 1em;
        margin-top: 1.3em;
        line-height: 1.8; }
        #detail .detail-wrap .de-text2 ul li {
          list-style-type: none; }
        #detail .detail-wrap .de-text2 ul li:before {
          content: '';
          width: 3px;
          height: 3px;
          display: inline-block;
          border-radius: 100%;
          background: white;
          position: relative;
          left: -9px;
          top: -3px; }
  #detail .image-container {
    width: 100%; }
    @media screen and (min-width: 768px) {
      #detail .image-container {
        max-width: 55%; } }
    #detail .image-container img {
      width: 100%;
      height: auto; }

select {
  width: inherit;
  margin-top: 1em; }

.cart-btn {
  margin-top: 2em; }
  @media screen and (min-width: 1024px) {
    .cart-btn {
      margin-top: 3em;
      max-width: 400px;
      width: 100%; } }
  .cart-btn div {
    display: block;
    border: 1px solid #999999;
    color: white;
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-style: italic;
    text-decoration: none;
    border-radius: 9999px;
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    padding: 1em 2.5em;
    text-align: center; }
    .cart-btn div img {
      width: 26px;
      height: auto;
      vertical-align: bottom;
      padding-right: 3px; }
    @media screen and (min-width: 1024px) {
      .cart-btn div {
        padding: 1.2em 7.5em; } }
    .cart-btn div:hover {
      background-color: #DED5D6;
      color: #232323; }

.price {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 2em; }
  .price dt {
    width: 2em;
    text-align: right;
    margin-right: 1em;
    margin-bottom: .5em;
    font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
    height: 1em; }
  .price dd {
    width: calc( 100% - 3em);
    margin-bottom: .5em;
    font-size: clamp(1rem, 0.929rem + 0.36vw, 1.375rem);
    height: 1em; }
    .price dd span {
      font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
      padding-left: 1em; }

.toggle_contents {
  margin-top: 2em; }
  .toggle_contents dt {
    position: relative;
    padding: 1.5em 1em 1em 2em;
    cursor: pointer;
    padding-left: 2em;
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem); }
  .toggle_contents dd {
    display: none;
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    line-height: 2;
    padding-left: 2em; }

.toggle_btn {
  position: absolute;
  top: 55%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }
  .toggle_btn:before, .toggle_btn:after {
    display: block;
    content: '';
    background-color: #fff;
    position: absolute;
    width: 7px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .toggle_btn:before {
    width: 1px;
    height: 7px; }

.toggle_title.selected .toggle_btn:before {
  content: normal; }

#infusion_decoction {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 3em;
  padding-bottom: 5em;
  background-color: #333; }
  #infusion_decoction .co-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%; }
    @media screen and (min-width: 1024px) {
      #infusion_decoction .co-box {
        flex-direction: row-reverse;
        align-items: center; } }
    #infusion_decoction .co-box p {
      font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
      line-height: 2; }
      @media screen and (min-width: 1024px) {
        #infusion_decoction .co-box p {
          margin-right: 3em; } }
  @media screen and (min-width: 1024px) {
    #infusion_decoction picture {
      max-width: 700px;
      flex-basis: 70%; } }
  #infusion_decoction picture img {
    width: 100%;
    height: auto; }
  #infusion_decoction h2 {
    font-size: clamp(1rem, 0.929rem + 0.36vw, 1.375rem);
    display: inline-block;
    color: white;
    margin-top: 2em;
    overflow: hidden;
    margin-bottom: .5em; }
    #infusion_decoction h2 .fd {
      display: block; }
      #infusion_decoction h2 .fd span {
        font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); }
  #infusion_decoction h3 {
    font-size: clamp(1rem, 0.929rem + 0.36vw, 1.375rem);
    margin-top: 1em;
    font-style: italic;
    margin-bottom: 1em; }
    #infusion_decoction h3 span {
      font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
      padding-left: 1em;
      font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
      font-style: normal; }

#detail_consultation {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 3em;
  padding-bottom: 5em;
  background-color: #333; }
  #detail_consultation .detail_con_box {
    width: 80%; }
  #detail_consultation .co-box {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    @media screen and (min-width: 1024px) {
      #detail_consultation .co-box {
        flex-direction: row-reverse;
        align-items: center; } }
    #detail_consultation .co-box p {
      font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
      line-height: 2; }
      @media screen and (min-width: 1024px) {
        #detail_consultation .co-box p {
          margin-right: 3em; } }
    #detail_consultation .co-box .in-text {
      flex-basis: 70%; }
  #detail_consultation dl {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-top: 3em; }
    #detail_consultation dl dt {
      width: 4em;
      font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem); }
    #detail_consultation dl dd {
      width: calc(100% - 7em);
      font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
      margin-left: 2em;
      margin-bottom: 2em; }
      #detail_consultation dl dd::after {
        content: '▽';
        position: absolute;
        display: block;
        color: #c2b3a4; }
  @media screen and (min-width: 1024px) {
    #detail_consultation picture {
      max-width: 700px;
      flex-basis: 30%; } }
  #detail_consultation picture img {
    width: 100%;
    height: auto; }
  #detail_consultation h2 {
    font-size: clamp(1.5rem, 1.405rem + 0.48vw, 2rem);
    display: inline-block;
    color: white;
    margin-top: 2em;
    overflow: hidden;
    margin-bottom: .5em; }
    #detail_consultation h2 .fd {
      display: block; }
      #detail_consultation h2 .fd span {
        font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); }
  #detail_consultation h3 {
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    margin-top: 1em;
    font-style: italic;
    margin-bottom: 3em;
    color: white; }

#related {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 3em;
  padding-bottom: 3em;
  position: relative; }
  #related h2 {
    font-size: clamp(1rem, 0.929rem + 0.36vw, 1.375rem);
    display: inline-block;
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    align-self: flex-start;
    overflow: hidden; }
    #related h2 .fd {
      display: block; }
      #related h2 .fd span {
        font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
        padding-left: 2em; }
  #related .ti-text {
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    line-height: clamp(2rem, calc( (0.79rem + 0.11vw) * 2 ), 3rem); }

/* detail slide */
.s-thumbnail {
  margin-top: 20px; }

.s-thumbnail .slick-track {
  transform: unset !important;
  width: inherit !important; }

.s-thumbnail-img {
  opacity: 0.3;
  transition: opacity .3s linear; }

.s-thumbnail .slick-current {
  opacity: 1; }

.slick-track {
  display: flex;
  margin-top: 1em; }
  .slick-track .thumbnail-img {
    width: 14% !important;
    margin-right: 20px; }

/* footer */
footer {
  display: flex;
  flex-direction: column;
  align-items: center; }
  footer .footer-box {
    width: 80%;
    margin-top: 3em; }
    footer .footer-box h2 {
      font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
      font-family: garamond;
      text-transform: uppercase; }

.footer-list {
  list-style: none;
  margin-top: 1em; }
  .footer-list li a {
    color: white;
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    text-decoration: none;
    font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.25rem);
    padding: .5em 0;
    display: inline-block; }
    .footer-list li a:hover {
      color: #B99b00; }
  .footer-list .small {
    font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); }

.footer-list2 {
  list-style: none;
  margin-top: 3em; }
  .footer-list2 li {
    font-family: "A1明朝", "A1 Mincho", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); }
    .footer-list2 li a {
      color: white;
      text-decoration: none;
      padding: .5em 0;
      display: inline-block; }
    .footer-list2 li.r2 {
      font-size: 10px;
      margin-top: 4em; }

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5em;
  margin-bottom: 3em; }
  .footer-logo picture {
    width: 100%;
    text-align: center; }
    .footer-logo picture img {
      width: 50%;
      height: auto;
      max-width: 200px; }
  .footer-logo address {
    font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
    font-family: "EB Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    margin-top: .5em; }

.footer-sns {
  list-style: none;
  display: flex;
  width: 40%;
  justify-content: center;
  margin-top: 1.6em; }
  .footer-sns li a {
    padding: 0 1em;
    display: block; }
    .footer-sns li a picture img {
      width: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
      height: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); }

.copyright {
  font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
  text-align: center;
  padding-bottom: 1em;
  padding-top: 1em; }

/* item list search */
.prd-lst-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3em;
  font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); }

.inline {
  margin-bottom: 1em;
  font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); }

/* howto */
.shopkeeper-h2 {
  font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  color: white; }

.def-lst-dt {
  font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
  color: white; }

.def-lst-dd {
  font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  line-height: 1.6; }

/* privacy */
.ttl-h2 {
  font-size: clamp(1rem, 0.545rem + 2.27vw, 2.25rem);
  color: white;
  margin: 2em 0;
  line-height: 2; }
  .ttl-h2 span {
    display: block;
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    padding-left: 0; }
    @media screen and (min-width: 768px) {
      .ttl-h2 span {
        display: inline;
        padding-left: 2em; } }

.container-section {
  border-top: 0 !important;
  margin-bottom: inherit !important;
  padding-top: inherit !important; }
  .container-section h3 {
    font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.25rem);
    color: white;
    margin: 3em 0 1em 0; }
  @media screen and (min-width: 768px) {
    .container-section > dl {
      display: flex;
      flex-wrap: wrap; } }
  .container-section > dl > dt {
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    color: white;
    border-bottom: 1px solid #d1d0cc;
    margin-bottom: 0.5em; }
    @media screen and (min-width: 768px) {
      .container-section > dl > dt {
        width: 35%;
        padding: 20px;
        margin: 0 0 10px 0; } }
  .container-section > dl > dd {
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    line-height: 1.6;
    margin-bottom: 2em; }
    .container-section > dl > dd ol, .container-section > dl > dd ul {
      margin-left: 1.2em; }
    @media screen and (min-width: 768px) {
      .container-section > dl > dd {
        width: 65%;
        padding: 20px;
        margin: 0 0 10px 0;
        border-bottom: 1px solid #d1d0cc; } }