@charset "UTF-8";

/*!
Theme Name: fs-yoshida
Description: フラワーショップよしだ｜南足柄市 枕花 神奈川県 小田原 花屋 プリザーブドフラワー 配達
Theme URI: https://www.fs-yoshida.com/web
Version: 1.0
License: fs-yoshida
License URI: https://www.fs-yoshida.com/web
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap');
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

html {
  font-size: 62.5%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: normal
}

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

ol, ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

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

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

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

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none
}

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
}

img {
  vertical-align: top
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0
}

input, select {
  vertical-align: middle
}

body {
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  color: #000;
  background: url(images/body_bg.jpg) left top repeat;
  line-height: 1.5
}

#wrapper {
  width: 100%;
  min-width: 1120px;
  min-height: 100%;
  float: none;
  margin: 0 auto;
  overflow: hidden
}

@media screen and (max-width:767px) {
  #wrapper {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    float: none;
    margin: 0 auto;
    overflow: hidden
  }
}

dd, dt, li, p, tr, tt {
  font-size: 1.4em
}

a:link, a:visited {
  font-weight: normal;
  color: #000;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear
}

a:active, a:hover {
  font-weight: normal;
  color: #666;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear
}

a:hover img.img_opacity {
  opacity: 0.75;
  filter: alpha(opacity=75);
  -webkit-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear
}

a img.img_opacity {
  -webkit-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear
}

@media print, screen and (min-width:768px) {
  #sp_navi, #sp_slider, #toggle, .h_tel {
    display: none
  }
  .header_box {
    width: 100%;
    margin-bottom: 10px
  }
  .header_box .header_logo {
    width: 240px;
    margin: 30px auto 20px
  }
  img.sp_t {
    display: none
  }
}

/****************************************

spヘッダー

*****************************************/
@media screen and (max-width:767px) {
  header {
    display: block;
    width: 100%;
    position: relative
  }
  .header_box {
      height: 74px;
  }
  .header_logo {
    padding: 10px
  }
  .header_logo img {
    width: 160px
  }
  .header_address {
    display: none
  }
  .header_btn {
    display: none
  }
  .h_tel {
    position: absolute;
    right: 65px;
    width: 70px;
    cursor: pointer;
    z-index: 9999;
    top: 23px
  }
  .sp_logo img {
    width: 160px;
    height: auto;
  }
  
  #toggle {
    position: fixed;
    right: 15px;
    top: 23px;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 9999
  }
  #toggle div {
    position: relative
  }
  #toggle span {
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background: #999;
    border-radius: 4px;
    -webkit-transition: .35s ease-in-out;
    -o-transition: .35s ease-in-out;
    transition: .35s ease-in-out
  }
  #toggle span:first-child {
    top: 0
  }
  #toggle span:nth-child(2) {
    top: 11px
  }
  #toggle span:nth-child(3) {
    top: 22px
  }
  .open_navi #toggle {
    position: fixed
  }
  .open_navi #toggle span:first-of-type {
    -webkit-transform: translateY(11px) rotate(-315deg);
    -ms-transform: translateY(11px) rotate(-315deg);
    transform: translateY(11px) rotate(-315deg)
  }
  .open_navi #toggle span:nth-of-type(2) {
    opacity: 0
  }
  .open_navi #toggle span:nth-of-type(3) {
    -webkit-transform: translateY(-11px) rotate(315deg);
    -ms-transform: translateY(-11px) rotate(315deg);
    transform: translateY(-11px) rotate(315deg)
  }
  #sp_navi {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow-y: scroll;
    text-align: left;
    background: rgba(255,255,255,0.95);
    /* background: linear-gradient(to bottom, rgba(255,255,255,0.95) 70px, rgba(245,245,245,0.9) 70px); */
    z-index: 999;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: .7s ease-in-out;
    -o-transition: .7s ease-in-out;
    transition: .7s ease-in-out;
    padding: 0 15px;
    /* width: 97%; */
  }

  .open_navi #sp_navi {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      -webkit-transition: .7s ease-in-out;
      -o-transition: .7s ease-in-out;
      transition: .7s ease-in-out;
  }

  .open_navi #wrapper {
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-filter: blur(3px);
      filter: blur(3px);
      -webkit-transition: .7s ease-in-out;
      -o-transition: .7s ease-in-out;
      transition: .7s ease-in-out;
  }

  #sp_navi .menu {
      padding: 70px 15px 0;
      text-align: center;
  }

  #sp_navi .menu .menu-item {
      width: 100%;
      text-align: left;
      border-bottom: #666 1.5px solid;
      cursor: pointer;
      /* color: #98168A; */
      color: #666;
      margin: 0 auto;
      font-size: 1.4rem;
      font-weight: bold;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
        font-family: Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  }

  #sp_navi .menu .menu-item span {
      margin-left: 15px;
      color: #FBF9F7;
      font-size: 1rem;
      font-weight: normal;
  }

  #sp_navi .menu .menu-item a {
      width: 100%;
      padding: 15px 5% 15px 6%;
      letter-spacing: 0em;
      font-weight: bold;
      position: relative;
  }

  /* #sp_navi .menu .menu-item a ::before {
      display: block;
      content: '';
      position: absolute;
      top: 2.3em;
      left: 2%;
      width: 8px;
      height: 8px;
      background-color: #98168A;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  } */

  /* #sp_navi .menu > .menu-item a:before {
    position: absolute;
      top: 50%;
      left: 0.2em;
      content: '';
      margin-top: -5px;
      border: 7px solid transparent;
      border-top-width: 5px;
      border-bottom-width: 5px;
      border-left-color: #ccc;
  } */

  #sp_navi .menu-item a,
  #sp_navi .menu-item span {
      display: inline-block;
  }

  #sp_navi .menu-item a:link,
  #sp_navi .menu-item a:visited,
  #sp_navi .menu-item a:hover,
  #sp_navi .menu-item a:active,
  #sp_navi .sub-menu li a:link,
  #sp_navi .sub-menu li a:visited,
  #sp_navi .sub-menu li a:hover,
  #sp_navi .sub-menu li a:active {
      /* color: #98168A; */
      color: #666;
      text-decoration: none;
  }

  #sp_navi .sub-menu {
      width: 100%;
      text-align: center;
      display: none;
      margin-bottom: 15px;
  }

  #sp_navi .sub-menu .menu-item {
      width: 100%;
      border: none;
  }

  #sp_navi .sub-menu .menu-item a {
      display: block;
      padding: 8px 0 8px 30px;
      /* color: #666 !important; */
      /* color: #F5F5F5 !important; */
      color: #FFF !important;
      font-size: 1.4rem;
      font-weight: normal;
      position: relative;
      /* background-color: rgba(170, 7, 153, 0.4); */
      background-color: #CCC;
      font-family: Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
      /* border-bottom: rgba(170, 7, 153, 0.4) 1px dotted; */
      /* border-bottom: 1px dotted #CCC; */
      border-bottom: 1px dotted #FFF;
  }
  #sp_navi .sub-menu .menu-item a:hover {
    /* color: #CCC !important; */
    color: #666 !important;
}

  /* #sp_navi .sub-menu .menu-item a::before {
      content: "";
      background: #666;
      position: absolute;
      left: 20px;
      width: 8px;
      height: 8px;
      top: 0;
      bottom: 0;
      transform: rotate(45deg);
      margin: auto;
  } */

  #sp_navi .sub-menu .menu-item a:hover {
      color: #ccc;
      background: none;
  }

  .menu-item-has-children {
      position: relative;
  }

  .menu-item-has-children::before {
      content: '';
      width: 10px;
      height: 10px;
      border: 0px;
      border-top: solid 2px #98168A;
      border-right: solid 2px #98168A;
      -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      transform: rotate(135deg);
      -webkit-transition: .2s ease-in-out;
      -o-transition: .2s ease-in-out;
      transition: .2s ease-in-out;
      position: absolute;
      top: 1.4em;
      right: 15px;
  }

  .menu-item-has-children.menu_open::before {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transition: .2s ease-in-out;
      -o-transition: .2s ease-in-out;
      transition: .2s ease-in-out;
      top: 22px;
  }
  #g_navi,.pc_header_description {
      display: none;
  }

  /* spナビ下部分 */
  #sp_navi .sp_navi_btm {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* max-width: 260px; */
      margin: 25px auto 10px;
      /* padding: 25px 15px 15px; */
      padding: 0px 15px;
      text-align: center;
      /* position: relative; */
      /* border: 4px double #ccc; */
  }
  #sp_navi a.sp_navi_tel {
      color: #98168A;
      font-size: 2.6rem;
      font-weight: bold;
      font-family: Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
      text-decoration: none;
      line-height: 1.4;
      text-align: center;
  }
  .sp_navi_tel img {
    width: auto;
    margin-bottom: 5px;
    text-align: center;
  }
  .sp_navi_btm_txt h2 {
    font-size: 1.8rem;
    /* font-weight: bold; */
    color: #98168A;
    margin-bottom: 20px;
    position: relative;
    padding: 10px 0;
  }
  #sp_navi .sp_navi_btm_txt h2:before, #sp_navi .sp_navi_btm_txt h2:after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #sp_navi .sp_navi_btm_txt h2:before {
    top: 0;
    border-top: 2px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  #sp_navi .sp_navi_btm_txt h2:after {
    bottom: 0;
    border-top: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
  }
  .sp_navi_btm_txt p {
      font-size: 1.3rem;
      color: #666;
  }
  .sp_navi_logo {
      /* text-align: center;
      margin-bottom: 10px; */
      position: absolute;
      top: 10px;
      left: 10px;
  }
  #sp_navi .sp_navi_logo img {
      margin-bottom: 10px;
      width: 160px;
      height: auto;
      opacity: 0.8;
  }

  /* .sp_navi_logo {
    position: absolute;
    left: 10px;
    cursor: pointer;
    z-index: 99999;
    top: 10px;
  } */

  #sp_navi .sp_navi_btn {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin: 5px auto 15px;
      width: 100%;
      align-items: center;
  }
  #sp_navi .sp_navi_btn a:not(:last-child) {
      margin-right: 15px;
  }
  #sp_navi .sp_navi_btn a img {
      max-height: 30px;
      min-width: 30px;
      width: auto;
  }
  #sp_navi .bana_area02 {
    max-width: 100%;
    margin: 0 auto;
  }

  #sp_navi .bana_area02 li {
    margin: 10px auto 10px;
  }

  #sp_navi .bana_area02 li img {
    max-width: 100%;
    height: auto;
  }


}

@media screen and (max-width:767px) {
  #g_navi {
    display: none
  }
}

/****************************************

pcヘッダー

*****************************************/
#g_navi {
  width: 960px;
  height: 50px;
  position: relative;
  margin: 0 auto
}

#g_navi .menu {
  *zoom: 1;
  width: 960px;
  list-style-type: none;
  float: right
}

#g_navi .menu:before {
  content: "";
  display: table
}

#g_navi .menu:after {
  content: "";
  display: table;
  clear: both
}

#g_navi .menu li {
  position: relative;
  width: 192px;
  float: left;
  text-align: center;
  line-height: 0
}

#g_navi .menu li a {
  display: block;
  margin: 0;
  color: #000;
  font-size: 1.4em;
  line-height: 1;
  text-decoration: none
}

#g_navi .menu li ul {
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s
}

#g_navi .menu li ul li {
  width: 100%
}

#g_navi .menu li ul li a {
  padding: 13px;
  border-top: 1px solid #ccc;
  font-size: 1.3rem;
  background: #FFF;
  text-align: center;
  opacity: 0.95;
  filter: alpha(opacity=95);
  color: #000
}

#g_navi .menu li ul li a:hover {
  background: #F5F5F5;
  color: #98168A;
  -webkit-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear
}

#g_navi .menu li:hover ul {
  visibility: visible;
  opacity: 0.95
}

#g_navi .menu li ul li a {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s
}

#g_navi .menu li:hover ul li a {
  visibility: visible;
  opacity: 1
}

#g_navi .menu>li:first-child {
  background: url(images/navi_bg01.png) center top 27px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:first-child:hover {
  background: url(images/navi_bg01.png) center top 17px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(2) {
  background: url(images/navi_bg02.png) center top 27px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(2):hover {
  background: url(images/navi_bg02.png) center top 17px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(3) {
  background: url(images/navi_bg03.png) center top 27px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(3):hover {
  background: url(images/navi_bg03.png) center top 17px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(4) {
  background: url(images/navi_bg04.png) center top 27px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(4):hover {
  background: url(images/navi_bg04.png) center top 17px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(5) {
  background: url(images/navi_bg05.png) center top 27px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(5):hover {
  background: url(images/navi_bg05.png) center top 17px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(6) {
  background: url(images/navi_bg06.png) center top 27px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#g_navi .menu>li:nth-child(6):hover {
  background: url(images/navi_bg06.png) center top 17px no-repeat;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

#slider {
  width: 100%;
  margin-bottom: 30px
}

#slider .metaslider {
  width: 1200px;
  margin: 0 auto
}

#teaser {
  width: 100%;
  margin-bottom: 30px
}

#teaser .teaser_area {
  width: 1200px;
  margin: 0 auto
}

@media screen and (max-width:767px) {
  #slider {
    width: 100%;
    margin-bottom: 30px
  }
  #slider .metaslider {
    width: 100%;
    margin: 0 auto
  }
  #teaser {
    width: 100%;
    margin-bottom: 30px
  }
  #teaser .teaser_area {
    width: 100%;
    margin: 0 auto
  }
  #teaser .teaser_area img.sp_t {
    width: 100%
  }
  #teaser .teaser_area img.pc_t {
    display: none
  }
}

main#top_main {
  width: 960px;
  margin: 60px auto
}

#contents {
  width: 960px;
  margin: 30px auto 60px
}

main#left_box {
  width: 690px;
  float: left
}

.single_text01 img {
  width: auto;
  height: auto;
  max-width: 100%
}

.breadcrumb_area {
  width: 100%;
  height: auto;
  padding: 10px 0;
  margin-bottom: 40px;
  background: #EFE7D1
}

.breadcrumb {
  width: 960px;
  margin: 0 0 10px;
  text-align: right
}

.breadcrumb p {
  font-size: 1.3rem
}

.breadcrumb a {
  position: relative;
  display: inline-block;
  text-decoration: none
}

.breadcrumb a:after {
  position: absolute;
  bottom: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #5D3922;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  -o-transition: transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s
}

.breadcrumb a:hover:after {
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1)
}

.bana_box .bana_area01 li, .bana_box .bana_area02 li {
  float: left;
  margin-right: 30px
}

.bana_box .bana_area01 li:nth-child(3n), .bana_box .bana_area02 li:nth-child(3n) {
  margin-right: 0
}

.bana_box .bana_area01 {
  margin-bottom: 20px
}

@media screen and (max-width:767px) {
  .breadcrumb_area {
    width: auto;
    height: auto;
    margin: 20px auto 10px
  }
  .breadcrumb {
    width: 100%;
    margin: 10px auto 15px
  }
  main#top_main {
    width: 100%;
    padding: 10px;
    margin: 0
  }
  #contents {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px
  }
  ul.side_btn {
    display: none
  }
  main#left_box {
    width: auto;
    float: none
  }
}

.top_box01 {
  width: 840px;
  margin: 0 auto 60px
}

.top_box01 .top_box01_img {
  width: 360px;
  float: left
}

.top_box01 .top_box01_text {
  width: 430px;
  padding-top: 120px;
  float: right
}

.top_box01 .top_box01_text p {
  font-size: 1.6rem;
  line-height: 1.7
}

.top_box02 {
  width: 920px;
  margin: 0 auto 40px
}

.top_box02 .top_box02_area {
  width: 280px;
  float: left;
  margin: 0 40px 20px 0
}

.top_box02 .top_box02_area:nth-child(3n) {
  margin: 0 0 20px 0
}

.top_box02 .top_box02_area img {
  margin-bottom: 10px
}

.top_box02 .top_box02_area figcaption a {
  font-size: 1.4rem
}

.top_box03 {
  width: 840px;
  margin: 0 auto 60px
}

.top_box03 .top_box03_img {
  width: 360px;
  float: right
}

.top_box03 .top_box03_text {
  padding-top: 140px;
  width: 430px;
  float: left
}

.top_box03 .top_box03_text p {
  font-size: 1.6rem;
  line-height: 1.7
}

.button {
  position: relative;
  display: inline-block;
  padding: 0 40px 0 0;
  color: #000;
  text-decoration: none
}

.button:after, .button:before {
  position: absolute;
  top: 50%;
  right: .2em;
  content: '';
  margin-top: -5px;
  border: 7px solid transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-color: #000
}

.button:after {
  opacity: 0;
  right: 1em
}

.button:hover:before {
  -webkit-animation: arrowbefore .5s;
  animation: arrowbefore .5s
}

.button:hover:after {
  -webkit-animation: arrowafter .5s;
  animation: arrowafter .5s
}

@-webkit-keyframes arrowbefore {
  to {
    right: -.4em;
    opacity: 0
  }
}

@keyframes arrowbefore {
  to {
    right: -.4em;
    opacity: 0
  }
}

@-webkit-keyframes arrowafter {
  99% {
    right: .2em;
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes arrowafter {
  99% {
    right: .2em;
    opacity: 1
  }
  to {
    opacity: 0
  }
}

.top_box04 {
  width: 960px;
  margin-bottom: 60px
}

.top_box04 .insta_box {
  width: 460px;
  float: left
}

.top_box04 .calendar_box {
  width: 460px;
  float: right
}

ul.top_box05 {
  margin-bottom: 60px
}

ul.top_box05 li {
  width: 300px;
  float: left
}

ul.top_box05 li:not(:last-child) {
  margin-right: 30px
}

@media screen and (max-width:767px) {
  .top_box01 {
    width: auto
  }
  .top_box01 .top_box01_text {
    width: auto;
    padding-top: 0;
    margin-bottom: 40px;
    float: none
  }
  .top_box01 .top_box01_img {
    width: 80%;
    float: none;
    margin: 0 auto
  }
  .top_box01 .top_box01_img img {
    width: 100%
  }
  .top_box02 {
    width: auto
  }
  .top_box02 .top_box02_area {
    width: 48%;
    margin: 0 4% 4% 0
  }
  .top_box02 .top_box02_area:nth-child(3n) {
    margin: 0 4% 4% 0
  }
  .top_box02 .top_box02_area:nth-child(2n) {
    margin: 0 0 4% 0
  }
  .top_box02 .top_box02_area img {
    width: 100%
  }
  .top_box03 {
    width: auto;
    margin: 0 auto 60px
  }
  .top_box03 .top_box03_text {
    padding: 0;
    margin: 0 auto 40px;
    width: auto;
    float: none
  }
  .top_box03 .top_box03_img {
    width: 80%;
    float: none;
    margin: 0 auto
  }
  .top_box03 .top_box03_img img {
    width: 100%
  }
  .top_box04 {
    width: auto;
    padding: 0px
  }
  .top_box04 .insta_box {
    width: auto;
    float: none;
    margin-bottom: 60px
  }
  .top_box04 .calendar_box {
    width: auto;
    float: none
  }
  .top_box04 .calendar_box iframe {
    width: 100%;
    height: 340px
  }
  ul.top_box05 {
    width: 80%;
    margin: 0 auto
  }
  ul.top_box05 li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 10px
  }
  ul.top_box05 li {
    width: auto;
    float: none
  }
  ul.top_box05 li img {
    width: 100%
  }
}

.news_box {
  width: 960px;
  margin-bottom: 60px
}

ul.news_post {
  width: 100%;
  height: 250px;
  overflow-y: scroll
}

ul.news_post .news_list {
  width: 98%;
  padding: 16px
}

ul.news_post .news_list:nth-child(2n) {
  background: #F5F5F5
}

ul.news_post .news_list .data {
  width: 14%;
  float: left;
  padding: 0;
  font-size: 1.4rem
}

ul.news_post .news_list .news_list_tit {
  width: auto;
  float: left;
  font-size: 1.4rem
}

ul.news_post .news_list .news_list_tit a {
  position: relative;
  display: inline-block;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s
}

ul.news_post .news_list .news_list_tit a:after {
  position: absolute;
  bottom: .3em;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #920783;
  opacity: 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s
}

ul.news_post .news_list .news_list_tit a:hover:after {
  bottom: 0;
  opacity: 1
}

ul.news_post .news_list .news_list_tit a:link, ul.news_post .news_list .news_list_tit a:visited {
  color: #000
}

ul.news_post .news_list .news_list_tit a:active, ul.news_post .news_list .news_list_tit a:hover {
  color: #920783
}

@media screen and (max-width:767px) {
  .news_box {
    width: 100%;
    float: none
  }
  .news_post {
    width: 100%;
    height: 240px;
    overflow-y: scroll
  }
  .news_list {
    width: 96%
  }
  ul.news_post {
    margin-bottom: 40px
  }
  ul.news_post .news_list .data {
    float: none
  }
  .news_list_tit {
    margin-top: 5px
  }
  h2.top_news_tit {
    background-position: 2px 10px, right -42px top, center top;
    border-radius: 4px
  }
}

.product_box {
  margin-bottom: 40px;
  text-align: center
}

.product_area {
  margin-bottom: 30px
}

.product_area .product_img {
  width: 300px;
  float: left;
  margin: 0 30px 30px 0
}

.product_area .product_img:nth-child(3n) {
  margin-right: 0
}

.product_area .product_img a {
  display: inline-block
}

.product_area .product_img img.object-fit-img {
  width: 300px;
  height: 240px;
  -o-object-fit: cover;
  object-fit: cover;
  pointer-events: none;
  font-family: 'object-fit: cover;';
  margin-bottom: 10px
}

.product_area .product_img figcaption {
  background: #F5F5F5;
  padding: 10px;
  text-align: center;
  font-size: 1.4rem
}

.artificial_box {
  background: #F5F5F5;
  padding: 20px;
  margin-top: 40px
}

.artificial_box dt {
  font-size: 1.6rem;
  color: #920783;
  margin-bottom: 10px
}

.judge_box {
  margin-bottom: 40px;
  text-align: center
}

.judge_text {
  margin-bottom: 30px
}

.shop_guide_box {
  margin-bottom: 40px
}

.shop_guide_list {
  list-style-type: decimal;
  padding-left: 15px;
  margin: 20px 0
}

.information_box {
  margin-bottom: 60px
}

.information_box .information_img {
  width: 360px;
  float: right
}

.wpcf7 {
  width: 80%!important;
  margin: 0 auto!important;
  text-align: left
}

.wpcf7-form textarea {
  width: 100%!important
}

@media screen and (max-width:767px) {
  .product_area .product_img {
    width: 48%;
    margin: 0 4% 4% 0;
    text-align: center;
  }
  .product_area .product_img:nth-child(3n) {
    margin: 0 4% 4% 0
  }
  .product_area .product_img:nth-child(2n) {
    margin: 0 0 4% 0
  }
  .product_area .product_img img.object-fit-img {
    width: 100%;
    height: 150px
  }
  .bana_box {
    width: 80%;
    margin: 0 auto
  }
  .bana_box .bana_area01 li, .bana_box .bana_area02 li {
    float: none;
    margin: 0 0 10px
  }
  .bana_box .bana_area01 li img, .bana_box .bana_area02 li img {
    width: 100%
  }
  .information_box .information_img {
    width: 80%;
    margin: 0 auto;
    float: none
  }
  .information_box .information_img img {
    width: 100%
  }
  .wpcf7 {
    width: 100%!important
  }
}

.single_box {
  width: 100%;
  margin: 0 auto
}

.single_text {
  width: 100%
}

.pager {
  clear: both;
  text-align: center;
  padding: 30px 0
}

a.page-numbers {
  background: rgba(0, 0, 0, 0.02);
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 5px 8px;
  margin: 0 2px;
  font-size: 1.4rem
}

.pager .current {
  background: rgba(0, 0, 0, 0.02);
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 5px 8px;
  margin: 0 2px;
  font-size: 1.4rem;
  background: black;
  border: solid 1px black;
  color: white
}

.nav-below {
  margin: 30px 0 20px;
  text-align: center;
  font-size: 1.4rem
}

@media screen and (max-width:767px) {
  .single_box {
    width: auto;
    padding: 0 10px
  }
}

.menu_table {
  width: 700px;
  margin: 40px auto 10px;
  border-collapse: collapse
}

.menu_table th {
  width: 50%;
  padding: 12px;
  border: 1px solid #D6D6D6;
  text-align: left;
  font-weight: normal;
  background: #F5F5F5
}

.menu_table th span {
  color: #92262C
}

.menu_table td {
  width: 50%;
  padding: 12px;
  border: 1px solid #D6D6D6;
  text-align: right
}

.overview_table {
  width: 540px;
  float: left
}

.overview_table tr th {
  width: 26%;
  text-align: left;
  padding: 12px;
  font-weight: normal;
  border-bottom: 1px dotted #CCC
}

.overview_table tr td {
  padding: 12px;
  border-bottom: 1px dotted #CCC
}

.information_calendar {
  width: 600px;
  margin: 0 auto
}

.contact_box {
  text-align: center;
  margin-bottom: 60px
}

.contact_box p.contact_tel {
  height: 30px;
  background: url(images/contact_tel.png) center center no-repeat;
  margin-top: 30px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
}

@media screen and (min-width: 768px){
  .contact_box a {
      pointer-events: none; /* PCのの場合は電話番号のリンク無効 */
  }
}

.sitepolicy {
  background: #F5F5F5;
  padding: 20px;
  margin: 30px 0
}

@media screen and (max-width:767px) {
  .single_box {
    width: auto;
    padding: 0 10px
  }
  .overview_table {
    width: 100%;
    margin: 0 auto 30px
  }
  .menu_table {
    width: 100%
  }
  .information_calendar {
    width: 100%
  }
  .information_calendar iframe {
    width: 100%;
    height: 340px
  }
}

p.line_break, span.line_break {
  padding-top: 20px
}

p.line_break02 {
  padding-top: 30px
}

.orange {
  color: #F49D0A;
  font-weight: bold
}

.green {
  color: #3BBF3F;
  font-weight: bold
}

.big_green {
  color: #3BBF3F;
  font-size: 1.6rem;
  font-weight: bold
}

.red {
  color: #FF0000
}

.big_red {
  color: #6D312D;
  font-size: 1.6rem;
  font-weight: bold
}

.big_pink {
  color: #F88577;
  font-size: 1.6rem;
  font-weight: bold
}

.big_bold {
  font-size: 1.6rem;
  font-weight: bold
}

.bold {
  font-weight: bold
}

.small {
  font-size: 1.2rem
}

h1 {
  color: #000;
  font-size: 3.6rem
}

h2 {
  font-size: 2.6rem;
  color: #241005
}

h3 {
  font-size: 2.0em;
  color: #241005
}

h4 {
  font-size: 1.4em;
  font-weight: bold;
  color: #241005
}

h5 {
  font-size: 1.4em;
  color: #241005;
  font-weight: bold
}

h1.top_headline {
  height: 30px;
  margin-bottom: 25px;
  background: url(images/h1_top_headline.png) left center no-repeat;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap
}

h2.top_subhead01 {
  margin-bottom: 40px;
  background: url(images/h2_top_subhead01.png) center top no-repeat;
  position: relative;
  padding-bottom: 20px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap
}

h2.top_subhead01:before {
  content: '';
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 60px;
  height: 2px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #CCC;
  border-radius: 2px
}

h2.top_subhead02 {
  height: 30px;
  margin-bottom: 25px;
  background: url(images/h2_top_subhead02.png) left center no-repeat;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap
}

h2.top_subhead03 {
  margin-bottom: 40px;
  background: url(images/h2_top_subhead03.png) center top no-repeat;
  position: relative;
  padding-bottom: 20px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap
}

h2.top_subhead03:before {
  content: '';
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 60px;
  height: 2px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #CCC;
  border-radius: 2px
}

h3.top_subhead01 {
  height: 70px;
  margin-bottom: 25px;
  background: url(images/h3_top_subhead01.png) center center no-repeat;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap
}

h3.top_subhead02 {
  height: 70px;
  margin-bottom: 25px;
  background: url(images/h3_top_subhead02.png) center center no-repeat;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap
}

h1.headline {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 20px
}

h1.headline:before {
  content: '';
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 60px;
  height: 2px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #CCC;
  border-radius: 2px
}

h2.subhead01 {
  position: relative;
  padding: 14px 0;
  margin-bottom: 30px;
  text-align: center;
  color: #920783;
  font-size: 2.0rem
}

h2.subhead01:after, h2.subhead01:before {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

h2.subhead01:before {
  top: 0;
  border-top: 2px solid #ccc;
  border-bottom: 1px solid #ccc
}

h2.subhead01:after {
  bottom: 0;
  border-top: 1px solid #ccc;
  border-bottom: 2px solid #ccc
}

h2.subhead02 {
  font-size: 1.8rem;
  padding: 12px 15px;
  background: #F5F5F5;
  border-left: 6px solid #98168A;
  margin-bottom: 20px
}

@media screen and (max-width:767px) {
  h1.top_headline {
    background: url(images/h1_top_headline.png) center center no-repeat;
    margin-bottom: 20px
  }
  h2.top_subhead02 {
    margin-bottom: 20px;
    background: url(images/h2_top_subhead02.png) center center no-repeat
  }
  h1.headline {
    font-size: 2.0rem
  }
}

@media screen and (max-width:767px) {
  #pc_footer {
    display: none
  }
  footer {
    background: none
  }
  #sp_footer {
    text-align: center;
    padding: 20px 10px 60px;
    position: relative;
  }
  .sp_pagetop {
    width: auto;
    /* position: fixed; */
    position: absolute;
    bottom: 96px;
    right: 0px;
  }
  .sp_pagetop a {
    width: 80%;
    display: inline-block;
  }
  .sp_pagetop a img {
    width: 100%;
    height: auto;
  }
  .sp_copyright {
    display: block;
    padding: 10px 0;
    margin-top: 30px;
    border-top: 1px solid #CCC;
  }
  .footer_btn {
    width: 170px;
    margin: 0 auto;
  }
  .footer_btn li {
    float: left;
  }
  .footer_btn li:not(:last-child) {
    margin-right: 10px;
  }

      /* ----追従---- */
      .sp_bnr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: fixed;
        width: 100%;
        height: 60px;
        bottom: 0;
        left: 0;
        z-index: 999;
    }

    .sp_bnr .sp_bnr_parts {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        width: calc(100% / 3);
        /* background: #98168A; */
        background: #666;
        border-top: 1px solid #FFF;
    }

    .sp_bnr .sp_bnr_parts a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .sp_bnr .sp_bnr_parts span {
        position: relative;
        display: block;
        height: auto;
        padding-top: 30px;
        line-height: 1.4;
        text-align: center;
        font-size: 1.1rem;
        letter-spacing: 0.1em;
        color: #fff;
    }

    .sp_bnr .sp_bnr_parts span::after {
        content: "";
        position: absolute;
        display: inline-block;
        left: 0;
        top: 0;
        width: 100%;
        height: 30px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center;
    }

    .sp-tel::after {
        background-image: url(images/sp-tel.svg);
        background-size: 14px;
    }

    .sp-contact::after {
      background-image: url(images/sp-contact.svg);
      background-size: 18px;
    }

    .sp-map::after {
        background-image: url(images/sp-map.svg);
        background-size: 18px;
    }

    /* .sp-pagetop::after {
        background-image: url(images/sp-pagetop.svg);
        background-size: 18px;
    } */

    /* ----サイトマップ---- */
    .footer_link-sp {
        width: calc(100% - 6px);
        margin: 0 auto;
        text-align: left;
        padding: 6px 10px 12px;
        /* background: rgba(146,7,131,0.1); */
        background: #EEE;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        outline: 1px solid rgba(170, 7, 153, 0.2);
        outline-offset: 3px;
        /* margin: 0 auto 20px; */
        margin: 0 auto 55px;
    }

    .footer_link-sp>li {
        font-size: 1.4rem;
        font-weight: bold;
        /* background: rgba(170, 7, 153, 0.4); */
        margin-bottom: 3px;
        position: relative;
        color: #666;
        width: 49%;
    }
    .footer_link-sp>li:before {
        display: block;
        content: "";
        position: absolute;
        top: 0.5em;
        left: 0px;
        border: 4px solid transparent;
        border-left: 7.5px solid #98168A;
    }

    .footer_link-sp li a {
        text-decoration: none;
        font-size: 1.3rem;
        /* font-weight: bold; */
        /* color: #98168A; */
        color: #666;
        /* width: 94%; */
        /* height: calc(100% - 16px); */
        display: block;
        padding: 2px 1% 2px 8%;
    }
    
    .footer_link-sp li a:hover {
      color: #98168A;
    }

    .footer_link-sp li ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .footer_link-sp li ul li {
        width: 50%;
        position: relative;
        line-height: 1.4;
    }

    .footer_link-sp li ul li :before {
        content: none;
    }

    .footer_link-sp li ul li a {
        color: #98168A;
        font-weight: normal;
        font-size: 1.3rem;
        vertical-align: middle;
    }

    /* インフォメーション */
    .sp_info {
      /* width: 67%; */
      margin: 0 auto 20px;
      text-align: center;
    }
    .sp_info p {
      font-size: 1.3rem;
      color: #666;
  }

}

@media print, screen and (min-width:768px) {
  footer {
    background: url(images/footer_bg.jpg) left top no-repeat;
  }
  #sp_footer {
    display: none;
  }
  #pc_footer {
    width: 960px;
    margin: 0 auto;
    border-top: 1px solid #CCC;
    padding: 40px 0;
  }
  .pagetop {
    position: fixed;
    bottom: 165px;
  }
  .copyright {
    text-align: center;
    font-size: 1.4rem;
  }
  /* サイドバー */
  .side_bar {
    position: fixed;
    bottom: 32px;
    right: 30px;
    display: block;
    z-index: 3;
    display: flex;
  }
  .side_bar a:not(:last-child) {
      margin-right: 10px;
      display: block;
  }
}

.wpcf7 {
  width: 100%
}

.wpcf7-form textarea {
  width: 650px;
  max-width: 100%
}

.wpcf7-form .wpcf7-submit {
  width: 50px!important
}

.wpcf7 p {
  line-height: 2.0;
  padding-top: 3px
}

.wpcf7-form input {
  width: auto!important
}

.contact_p_strong {
  border-top: 1px dotted #999;
  font-weight: bold;
  margin-top: 15px;
  padding-top: 15px!important
}

.normal {
  font-weight: normal
}

.wpcf7-submit {
  margin-top: 10px
}

.wpcf7-response-output {
  font-size: 1.3em
}

@media screen and (max-width:767px) {
  .wpcf7-form textarea {
    width: 100%!important
  }
}

.clearfix {
  display: inline-block
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden
}

* html .clearfix {
  height: 1%
}

.clearfix {
  display: block
}

@media screen and (max-width: 899px) {
  .line_pc {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .line_pc {
    right: 20%;
    width: 50px;
    cursor: pointer;
    z-index: 9999;
    top: 80px;
    position: absolute;
  }
}