/* 追加CSS */
body {
height: 100%;
  margin: 0;
  padding: 0;
  font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  background-image: url(../img/backimg.jpg);
  background-repeat: repeat-y;
}
#Herbspice .backimg{
background-image: url(../img/backimg_herb.jpg);
}
#Herbspice .col{
background-color: #FFF;
border-radius: 20px;
margin: 0 5px 0 5px;
padding: 15px;
}
#Herbspice h1{
    color: #000;
opacity: 0;
}
@media screen and (max-width:768px){
#Herbspice .col{
margin:  5px 0 5px 0;
}
}
.jump h1{
color: #000;
opacity: 0;
}
.wrap {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow:auto;
}
/* imgの下の隙間を消す */
img {
  vertical-align: bottom;
}
a {
  color: #000;
}
/* 画像を半透明 */
a img:hover {
  opacity: 0.8;
}
ul li {
  list-style: none;
}
h1,h2,h3{
padding: 10px 20px 10px 20px;
  margin: 0 0 0 0;
font-family:"游明朝体 デミボールド", "游明朝体 ミディアム";
color:#760001;
}
h1{
  font-size: 28px;
}
h2{
  font-size: 24px;
}
h3{
  font-size: 22px;
}
p{
margin: 0 auto;
padding: 10px 20px 10px 20px;
}

.sp{
display: none;
}
@media screen and (max-width:768px) {
.pc{
display: none;
}
.sp {
        display: block;
    }
}

/* グリッド 770px以下のモバイル表示 幅を100%
-------------------------------------------------*/
@media (max-width: 770px) {
  .row .column.column-10, .row .column.column-20, .row .column.column-25, .row .column.column-33, .row .column.column-34, .row .column.column-40, .row .column.column-50, .row .column.column-60, .row .column.column-66, .row .column.column-67, .row .column.column-75, .row .column.column-80, .row .column.column-90 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* ヘッダー
-------------------------------------------------*/
header {
  background-color: white;
  margin: 0 0 0 0;
}
.logo {
height: 64px;
  margin: 0;
  padding: 10px 0 10px 20px;
}

@media screen and (max-width: 770px) {
header {
  background-color: white;
  margin: 0 0 0 0 !important;
  padding: 0 0 0 0 !important;
}
.logo {
height:auto;
text-align: center;
  margin: 0;
  padding: 20px 0 10px 0;
}
}

/* Crumbs
----------------------------------------------- */
.bs-crumbs {
  width:100%;
  height:50px;
  margin: 0 auto;
  padding: 10px 20px 15px 20px;
  font-size: 14px;
  color: #CCC;
  line-height: 2em;
}
  @media screen and (max-width: 768px) {
    .bs-crumbs {
      box-sizing:inherit;
      width: 100%;
      padding: 10px 0 0 0; }
      }
  .bs-crumbs strong {
    font-weight: bold; }
  .bs-crumbs a {
    color: #000;
    text-decoration: none; }
    .bs-crumbs a:visited {
      color: #000; }
    .bs-crumbs a:hover {
      color: #555; }
  .bs-crumbs ul {
    display: flex;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    flex-wrap: wrap; }
    
/* メニュー
-------------------------------------------------*/
nav ul {
  height: 64px;
  display:flex;
  flex-direction: row;
  justify-content: left; /* メニューの項目を左揃え */
  list-style-type: none;
  margin: 0px 0 0px 20px;
}
@media screen and (max-width: 770px) {
  nav ul {
	display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style-type: none;
} 
  nav ul, li {
    height: auto;
  }
}


nav li {
  height: 64px;
  padding: 20px 20px 0px 20px;
  border-left: thin solid #cccccc;
}
nav li a {
display: block;
  color: #808080;
  font-weight: bold;
}
nav li a:hover {
  color: #BD2A2A;
}
/* ハンバーガーメニュー
-------------------------------------------------*/
.slicknav_menu {
  display: none; /*PC時は非表示*/
}
@media screen and (max-width: 770px) {
  #menu {
    display: none; /*モバイル時は非表示*/
  }
  .slicknav_menu {
    display: block; /*モバイル時は表示*/
    background-color: #FFF;
    margin: 0;
    padding: 0;
  }
  .slicknav_btn {
    background-color: #FFF;
  }
  .slicknav_menutxt {
    color: #999 !important;
    text-shadow: initial !important;
    padding-top: 0.2em;
  }
  .slicknav_icon-bar {
    width: 1.5em !important;
    height: 0.2em !important;
    border-bottom: 1px solid #923B00;
  }

  .slicknav_nav ul {
  background-image: url(../img/nav_img.png);
    background-color: rgba(255,255,255,0.9);
    background-blend-mode: lighten;
    background-position:center;
    margin: 0px;
  margin: 0;
  }
  .slicknav_menu li {
  background: none;
  height: auto;
  margin: 0;
  padding: 10px 0 10px 0;
    color: #ccc;
    text-align: center;
    vertical-align: bottom;
    border-left: none !important;
  }
  .slicknav_menu li a {
    color: #666;
    font-weight: 600;
    }
  
/*ハンバーガーメニューのエフェクト*/
.slicknav_icon, .slicknav_icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.slicknav_icon {
  position: relative;
  width: 50px;
  height: 44px;
}
.slicknav_menu .slicknav_icon-bar {
  position: absolute;
  left: 0;
}
.slicknav_icon span:nth-of-type(1) {
  top: 0;
}
.slicknav_icon span:nth-of-type(2) {
  top: 3px;
}
.slicknav_icon span:nth-of-type(3) {
  bottom: 0;
}
.active .slicknav_icon-bar:nth-of-type(1) {
  -webkit-transform: translateY(6px) rotate(-45deg);
  transform: translateY(6px) rotate(-45deg);
}
.active .slicknav_icon-bar:nth-of-type(2) {
  opacity: 0;
}
.active .slicknav_icon-bar:nth-of-type(3) {
  -webkit-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg);
}
}
/* ドロップダウンメニュー
-------------------------------------------------*/
@media screen and (min-width: 770px) {
 ul li ul {
  background-color: #fff;
    margin: 0;
    display: none;
    position: relative;
  }
    nav ul li:hover ul {
    margin: 0 0 0 -21px;
    display:flex;
    position:absolute;
    top: 100%;
    left:auto;
    padding: 0 0 0 0;
    z-index:100;
  }
  nav ul li ul li {
 background-color: rgba(118,0,1,0.8);
    padding: 15px 20px 20px 20px;
    text-align:center;
    border-left: thin solid #760001;
    border-top: thin solid #ccc;
    }
nav ul li ul li a{
color:#fff;
}
}
/* メイン
-------------------------------------------------*/
main {
flex: 1;
  margin: 0;
}
.news {
  margin: 6rem 0 0 0;
}
.top h1,.top h2,.top p{
text-align: center;
}
@media screen and (max-width: 768px) {
.top p{
text-align:left;
}
.top h2{
font-size: 20px;
}
.news h3{
text-align: center;
}
}

.news h3 {
text-align: left;
  border-bottom: 1px solid #ccc;
  font-size: 22px;
}
.widget h2 {
  border-bottom: 1px solid #ccc;
  font-size: 20px;
}
/*210729追加_*/
#slider {
    width: 100%;
    height: 60vh;/*スライダー全体の縦幅*/
}

@media screen and (max-width: 768px) {
#slider{
width: 100%;
height: 35vh;/*スライダー全体の縦幅*/
}
}
/*メニュー部分*/
.menu{
    color: #666;
}
.menu h4{
font-family: 'Kiwi Maru', serif;
color: #CF5A00;
margin: 0;
padding: 5px 0 0 5px;
text-align: center;
}

.menu td{
padding:7px;
line-height: 1.5em;
}

.impact{
font-size: 1.2em;
font-weight: bold;
color: #FF0000;
}
.point{
color: #567F00;
}
.order{
color: #1E09A5;
font-size: 2em;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.menu table{
margin: 0 auto;
width: 90%;
}
}

.right{
text-align: right;
}
.left{
text-align:left;
}
.center{
text-align:center;
}
.info{
color: #FF0000;
}

.aboutimg{
width: 70%;
margin: 25px 0 0 20px;
}

.herbspice h3{
color:#FFF;
text-shadow: 1px 2px 3px #333;
}
.herbspice h4{
color: #FF0000;
}
 .yellow{
color:#FFFF00;
text-shadow: 1px 2px 3px #333;
}
 .white{
color:#FFF;
text-shadow: 1px 2px 3px #333;
}
/*ウィジェットエリア*/
.widget-area {
}
.widget {
}
.w100{
width: 300px;
}
@media screen and (max-width: 768px) {
.w100{
width: 100%;
}
}

.blog-calendar{
margin: 0 auto;
padding: 0;
width: 100%;
}
.blog-calendar th,td{
padding: 5px 2px 5px 2px;
text-align:center;
}
/* ブログのリスト 調整
-------------------------------------------------*/
.post-list li {
  list-style-type: none;
  border-bottom: 1px solid #f4f4f4;
}

/*メールフォーム*/
.col-input{
text-align: left;
}
.submit{
font-size: 22px;
}

/* フッター
-------------------------------------------------*/
.footer {
color: #FFFFFF;
  text-align: center;
  margin-top: 20px;
  padding: 50px 0 50px 0;
  background-color: #760001;
}
.footer a{
color:#FFFFFF;
}
/* ボタン
-------------------------------------------------*/
.button {
  background-color: #fff !important;
  color: #666 !important;
  border-color: #666 !important;
}
/* ギャラリーページ
-------------------------------------------------*/
.gallery {
  box-sizing: border-box;
}
.gallery-contents {
  max-width: 800px;
}
.gallery-contents .box {
  width: 50%;
  float: left;
  display: block;
  padding-right: 1.5rem;
}