@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
**
** 全体装飾(ここから)
**
************************************/
/* ページ全体の横パディングを削除 */
.main{
	padding: 0 0;
}

/* ページタイトル設定 */
h1.entry-title{
	font-family: "hot-gyoshokk", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	color: #8d394e;
	margin: 3% 0;
}

h1.entry-title::before{
	content: "";
	display: inline-block;
	width: 50px;
	height: 50px;
	background-image: url(https://hukuohagi.com/wp-content/uploads/2023/08/azuki_icon.png);
	background-size: contain;
	vertical-align: middle;
}
h1.entry-title::after{
	content: "";
	display: inline-block;
	width: 50px;
	height: 50px;
	background-image: url(https://hukuohagi.com/wp-content/uploads/2023/08/azuki_icon.png);
	background-size: contain;
	vertical-align: middle;	
}

/* フローティングハンバーガーメニュー */
.hukuohagi-hamburger{
	z-index: 999;
	position: fixed;
	top: 10%;
	right: 5%;
}
.hamburger-menu div {
  width: 35px; 
  height: 5px;
	background-color: #8d394e;
  margin: 6px 0;
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:skewX(0deg);
  /* X軸(横)の傾斜角度を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  transform:skewX(70deg);
  /* X軸(横)の傾斜角度を指定 */
}
.hamburger-menu + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
	width: 30%;
  display:block;
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
}
/* ハンバーガーメニュー非表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #8d394e;
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 25px;
  color: white;
  /* display: block;*/
	transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
}

.sidebar-btn{
	margin-top: 30%;
}
.sidebar-btn a {
  transform:rotate(0deg) translate(0px,0px);
  /* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
	font-size: 1rem;
}
.sidebar-btn p{
	font-size: 1rem;
	color: #e6e6e6;
}

.sidebar-btn_float{
	display: flex;
	justify-content: space-between;
	width: 70%;
	margin-left: 15%;
}
.sidebar-btn_float_left{
	width: 60%;
}
.sidebar-btn_float_left p:hover {
  color: white;
  transform:rotate(-3deg) translate(3px,5px);
	transition: 0.3s;
}
.sidebar-btn_float_right{
	width: 100%;
}
.sidebar-btn_float_right p{
	color: #e6e6e6;
	opacity: 0.5;
}

.left-hover p{
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	animation: flowing-anim 1s;
}
@keyframes flowing-anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}		
.sidenavs p {
  /* margin:30px auto;*/
	
  width:250px;
  /* border: 1px solid white; */
  border-radius: 10px;
  /* ボーダーにradiusで丸みをつける */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 9%;
  right: 15%;
  font-size: 36px;
  margin-left: 30px;
}

/* 画面右下のGoTo-Topボタン */
.go-to-top-button {
    border-width: 0;
    background-color: #fff8dc;
    color: #8d394e;
	border: solid 1px #8d394e;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    border-radius: 30px;
    font-size: 32px;
	opacity: .8;
}

/* フッター上のスペースの削除 */
article#post-16.article.post-16.page.type-page.status-publish.hentry{
	margin-bottom: 0;
}

/* フッター上の余白設定 */
.top_bottom-margin{
	position: relative; 
	z-index: 2;
	background-color: #e6e6e6;
	width: 100%;
	height: 30px;
	margin-bottom: 0;
}


/* スペーサー設定*/
.spacer10vh{
	height: 60px;
	height: 10vh;
	width: 100%;
}
.spacer20vh{
	height: 120px;
	height: 20vh;
	width: 100%;
}
.spacer30{
	height: 30px;
	width: 100%;
}

/************************************
**
** 全体装飾(ここから)
**
************************************/

/************************************
** ページをフェードイン表示する
************************************/
.body {
	animation: fadein 2s forwards; /*アニメーション指定*/
}

@keyframes fadein {
	0% {opacity: 0} /*アニメーション開始時*/
	100% {opacity: 1} /*アニメーション終了時*/
}
/* クラス単位でのフェードイン設定 */
.fade-in {
    opacity: 0; 
    transition: all 1.5s;
    transform: translate(0,30px);
}
.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* クラス単位での右横からフェードイン設定 */
.fade-in-rightslide {
    opacity: 0; 
    transition: all 1.5s;
    transform: translate(100px,0);
}
.rightside-scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* クラス単位での左横からフェードイン設定 */
.fade-in-leftslide {
    opacity: 0; 
    transition: all 1.5s;
	transform: translate(-100px,0);
}
.leftslide-scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}
/************************************
** ページをフェードイン表示する(ここまで)
************************************/



/************************************
** モバイルフッターメニュー(ここから)
************************************/
.mobile-footer-menu-buttons.mobile-menu-buttons{
	background-color: #8d394e;
	opacity: .8;
}

span.custom-menu-icon.menu-icon{
	color: #fff8dc;
}

.custom-menu-caption.menu-caption{
	color: #e6e6e6;
}
/************************************
** モバイルフッターメニュー(ここまで)
************************************/




/************************************
**
** トップページ(ここから)
**
************************************/

/*************************************/
/*** ファーストビュー
/*************************************/

/******** PC版動画背景 ********/
/* スマホ版・タブレット版スライドショーを非表示 */
.fview_main-contents, .fview_main-contents-respo{
	display: none;
}
/* スマホ背景透過用ブロックを非表示 */
.top_fv-transparent{
	display: none;
}
/* ----- グラデーションオーバーレイ(ノイズ) ----- */
.hukuohagi-fv_bgvideo-wrap{
  height: 100vh;
  /* background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4),rgba(17, 66, 99, 0.6)); */
  background: linear-gradient(90deg, rgba(111,111,111,1), rgba(254,254,254,0.1) 50%, rgba(111,111,111,1));
	margin-bottom: 0;
}
/* ----- 背景用の動画ファイル ----- */
#hukuohagi-fv_bgvideo{
  position: fixed;
  right: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  /*background: url('https://hukuohagi.com/wp-content/uploads/2023/08/azuki_bg.jpg') no-repeat;*/ 
  background-color: #000;
  background-size: cover;
}
/* ----- 背景の上に表示させたいコンテンツ ----- */
.hukuohagi-fv_bgvideo-title{
  position: relative; /*必ず必要*/
  z-index: 2; /*必ず必要*/
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
  text-align:center;
  margin: auto;
}

/* スマホ版タイトルの非表示 */
.top_about_message-title--respo, .top_hope_message-title--respo, .top_shop-title--respo{
  display: none;
}

/*************************************/
/*** 新着情報(ここから)
/*************************************/

/****** 新着情報 ******/
.top_new-info{
  background-color: white;
  width: 100%;
  height: auto;
  padding: 30px 0 60px 0;
  margin-bottom: 0;
  position: relative;
  z-index: 100;
}
.top_new-info_title{
  text-align: center;
}

.top_new-info_title h2{
  color: #8d394e;
  background-color: #fff;
  margin-bottom: 0;
}


/* 2カラム化 */
.top_new-info_flex-wrap{
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}
.top_new-info_left-wrap{
  width: 45%;
}
.top_new-info_right-wrap{
  width: 45%;
}


/****** お知らせ ******/
/* サムネイル画像の非表示 */
/*
.widget-entry-cards figure{
	display: none;
}
*/
.widget-entry-card-date, .new-entry-card-post-date.widget-entry-card-post-date.post-date{
	display: block;
}

.category-news-post, .category-10-post{
	padding-left: 3%;
	padding-right: 3%;
}

/* お知らせの外枠 */ 
.top_new-info_left_news{
  background-color: #e6e6e6;
	height: auto;
	padding: 3% 0;
	margin-bottom: 5%;
}
/* タイトル装飾 */
.top_new-info_left_news-title p{
  color: #8d394e; 
	margin-bottom: 0.6rem;
}
/* 投稿内容の左マージン */
.widget-entry-card-content {
    margin-left: 10px;
}
div.new-entry-cards.widget-entry-cards.no-icon.cf.border-partition{
	margin-bottom: 0.2rem;
}
/* お知らせの下線 */
div.new-entry-card-title.widget-entry-card-title.card-title{
	border-bottom: dotted 1px #8d394e;
	color: #555;
}

/* もっとみる */
.top_new-info_left_news_more{
	text-align: right;
	font-size: 0.8rem;
}
.top_new-info_left_news_more a{
	padding-right: 3%;
}

/****** 営業日カレンダー ******/
#calendarTitle{
	color:#fff;
}
.top_new-info_left_calendar-title p{
  color: #8d394e; 
	margin-bottom: 0.6rem;
}
.top_new-info_left_calendar{
  background-color: #e6e6e6;
  text-align: center;
	padding: 1%;
}
.top_new-info_left_calendar-caution{
	font-size: 10px;
	text-align: left;
	padding: 1% 3%;
}
/****** instagram ******/
.top_new-info_right_Instagram-title p{
  color: #8d394e;
	margin-bottom: 0.6rem;
}
.top_new-info_right_Instagram{
  /*background-color: #e6e6e6;*/
  width: 100%;
  height: 95%;
  margin: 0 auto;
}

/* スマホ版の非表示*/
.top_new-info_right-wrap_respo{
	display: none;
}

/*************************************/
/*** 新着情報～店舗情報まで
/*************************************/
/* 背景色設定 */
.top_main-contents{
	background-color: #e6e6e6;
	position: relative;
	z-index: 100;
	padding-top: 30px;
	margin-bottom: 0;
}



/*************************************/
/*** 福おはぎについて
/*************************************/
.top_about{
  padding: 30px 0;
  background-color: #e6e6e6;
}

/***** 背景サイズ *****/
.top_about_Wrapper {
  max-width: 90%;
  height: 400px;
  height: 30vw;
  margin: 0 auto;
  padding: 20px 30px;
  position: relative;
  z-index: 100;
}

/* メッセージコンテンツ */
.top_about_message {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 85%;
  width: 85%;
  height: 80%;
  border: 1px solid #555;
  background-color: #fff;
  box-shadow: 2px 2px 4px gray;
  z-index: -1;
}

.top_about_message-title {
  position: absolute;
  left: 50px;
  top: 3rem;
  font-size: 24px;
  font-weight: bold;
  color: #8d394e;
}
.top_about_message-title_vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.top_about_message-text {
  margin-top: 3rem;
  margin-bottom: 10rem;
  font-size: 1rem;
  line-height: 1.6;
  width: 40%;
}
.top_about_message-text {
  margin-left: 15%;
}


/* 画像の設定 */
.top_about_img-wrapper {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 1;
}
.top_about_img-wrapper img {
  height: 300px;
  height: 25vw;
  width: auto;
  object-fit: fill; 
  margin-bottom: 30px;
}


/*************************************/
/*** 福おはぎの想い
/*************************************/
.top_hope{
  padding: 30px 0;
  background-color: #e6e6e6;
}
/***** 背景サイズ *****/
.top_hope_Wrapper {
    max-width: 90%;
	height: 400px;
    height: 30vw;
    margin: 0 auto;
    padding: 20px 30px;
    position: relative;
    z-index: 100;
}

/* メッセージコンテンツ */
.top_hope_message {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 85%;
  width: 85%;
  height: 80%;
  border: 1px solid #555;
  background-color: #fff;
  box-shadow: 2px 2px 4px gray;
  z-index: -1;
}


.top_hope_message-text {
  margin-top: 3rem;
  margin-bottom: 10rem;
  font-size: 1rem;
  line-height: 1.6;
  width: 40%;
}
.top_hope_message-text {
    margin-left: 45%;
}

.top_hope_message-title {
  position: absolute;
  right: 50px;
  top: 3rem;
  font-size: 24px;
  font-weight: bold;
  color: #8d394e;
}
.top_hope_message-title_vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}


/* 画像の設定 */
.top_hope_img-wrapper {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1;
}
.top_hope_img-wrapper img {
 	height: 300px;
	height: 25vw;
	width: auto;
	object-fit: fill;
}

/*************************************/
/*** 店舗情報
/*************************************/
.top_shop{
  padding: 30px 0;
  background-color: #e6e6e6;
}

/***** 背景サイズ *****/
.top_shop_Wrapper {
  max-width: 90%;
  height: 400px;
  height: 30vw;
  margin: 0 auto;
  padding: 20px 30px;
  position: relative;
  z-index: 100;
}

/* メッセージコンテンツ */
.top_shop_message {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 85%;
  width: 85%;
  height: 80%;
  border: 1px solid #555;
  background-color: #fff;
  box-shadow: 2px 2px 4px gray;
  z-index: -1;
}

.top_shop_message-title {
  position: absolute;
  left: 50px;
  top: 3rem;
  font-size: 24px;
  font-weight: bold;
  color: #8d394e;
}
.top_shop_message-title_vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.top_shop_message-text {
  margin-top: 3rem;
  margin-bottom: 10rem;
  font-size: 1rem;
  line-height: 1.6;
  width: 40%;
}
.top_shop_message-text {
  margin-left: 15%;
}


/* 画像の設定 */
.top_shop_img-wrapper {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 1;
}
.top_shop_img-wrapper img {
  height: 300px;
  height: 25vw;
  width: auto;
  object-fit: fill; 
  margin-bottom: 30px;
}


/*************************************/
/*** アクセス
/*************************************/
.top_access{
  padding: 0 0 30px 0;
  background-color: #e6e6e6;
  position: relative;
  z-index: 100;
  width: 100%;
  height: auto;
}
section.top_access{
	margin-bottom: 0;
}
.top_access_title h2{
	text-align: center;
	color: #8d394e;
	background-color: #e6e6e6;
	margin-bottom: 0;
}
.top_access_map{
  text-align: center;
}
.top_access_map iframe{
	width: 90%;
	height: 25rem;
	border: 1px solid #555;
}
/*
 width="600" height="450" 
*/

/************************************
**
** トップページ(ここまで)
**
************************************/






/************************************
**
** 商品一覧(ここから)
**
************************************/
/* メニュー下のグレー帯を削除 */
.content {
    margin-top: 0;
}

/* バックグラウンド背景設置 */
/*
#main{
	background-image: url("https://hukuohagi.com/wp-content/uploads/2023/08/azuki_bg.jpg");
	background-repeat: repeat;
}
*/
.commoditylist-wrap{
  background-image: url(https://hukuohagi.com/wp-content/uploads/2023/08/azuki_bg.jpg);
  background-size: contain;
  background-repeat: repeat;
  padding-bottom: 5em;
}

/* 各商品ごとのマージン */
.list_leftcommodity{
	margin-bottom: 30px;
}


/* 予約リンク */
.commoditylist-reserved{
	text-align: center;
	font-size: 1rem;
}
.commoditylist-reserved p{
	margin-bottom: 0;
}
	
/******** 左写真コンテンツ(ここから) ********/
.list_leftcommodity_main-flex_left_phonetitle{
  display: none;
}

/* 2カラム化 */
.list_leftcommodity_main-flex{
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}
.list_leftcommodity_main-flex_left{
  width: 45%;
}
.list_leftcommodity_main-flex_right{
  width: 45%;
}

/* 背景設定 */
.list_leftcommodity{
  max-width: 100%;
  height: 400px;
  margin: 0 auto;
  padding: 20px 30px;
  position: relative;
  z-index: 100;
}

/* 木目の配置 */
.list_leftcommodity-bg{
	position: absolute;
	top: 0;
	left: 17%;
	max-width: 70%;
	width: 78%;
	height: 115%;
 	background-image: url("https://hukuohagi.com/wp-content/uploads/2023/08/item_bgimg.jpg");
	z-index: -1;
	box-shadow: 2px 2px 4px gray;
}

/* 写真成形・配置 */
.list_leftcommodity_main-flex_left_img {
	position: absolute;
	top: 30px;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
	left: -150px;
	z-index: 1;
}
.list_leftcommodity_main-flex_left_img img {
  clip-path: circle(40% at 50% 50%); 
  height: auto;
  width: 500px;
  object-fit: fill; 
  margin-bottom: 30px;
}

/* テキストの配置 */
.list_leftcommodity_main-flex_right{
  position: absolute;
  top: 40px;
  left: 40%;
  z-index: 1;
}
.list_leftcommodity_main-flex_right_pc-title h3, .list_leftcommodity_main-flex_left_phonetitle h3{
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 20px; 
	border: none;
	padding: 0;
}
.list_leftcommodity_main-flex_right_message{
  font-size: 1rem;
}
.list_leftcommodity_main-flex_right_message p{
  font-size: 1rem;
  width: 130%;
}
.list_leftcommodity_main-flex_right_message-bold{
  font-weight: bold;
}
/******** 左写真コンテンツ(ここまで) ********/


/******** 右写真コンテンツ(ここから) ********/
.list_rightcommodity_main-flex_right_phonetitle{
  display: none;
}

/* 2カラム化 */
.list_rightcommodity_main-flex{
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}
.list_rightcommodity_main-flex_left{
  width: 45%;
}
.list_rightcommodity_main-flex_right{
  width: 45%;
}

/* 背景設定 */
.list_rightcommodity{
  max-width: 100%;
  height: 400px;
  margin: 0 auto;
  padding: 20px 30px;
  position: relative;
  z-index: 100;
}

/* 木目の配置 */
.list_rightcommodity-bg{
  position: absolute;
  top: 0;
  right: 17.5%;
  max-width: 70%;
  width: 78%;
  height: 110%;
  background-image: url("https://hukuohagi.com/wp-content/uploads/2023/08/item_bgimg.jpg");
  box-shadow: 2px 2px 4px gray;
  z-index: -1;
}

/* 写真成形・配置 */
.list_rightcommodity_main-flex_right_img{
	position: absolute;
	top: 30px;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
	right: -145px;
	z-index: 1;
}
.list_rightcommodity_main-flex_right_img img {
  clip-path: circle(40% at 50% 50%); 
  height: auto;
  width: 500px;
  object-fit: fill; 
  margin-bottom: 30px;
}

/* テキストの配置 */
.list_rightcommodity_main-flex_left{
  position: absolute;
  top: 30px;
  left: 8%;
  z-index: 1;
}
.list_rightcommodity_main-flex_left_pc-title h3, .list_rightcommodity_main-flex_right_phonetitle h3{
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 20px; 
	border: none;
	padding: 0;
}
.list_rightcommodity_main-flex_left_message{
  font-size: 1rem;
}
.list_rightcommodity_main-flex_left_message p{
  width: 115%;
}
.list_rightcommodity_main-flex_left_message-bold{
  font-size: 1rem;
  font-weight: bold;
}
/******** 右写真コンテンツ(ここまで) ********/


/************************************
**
** 商品一覧(ここまで)
**
************************************/


/************************************
** お問い合わせ(ここから)
************************************/
/*********** お問い合わせフォーム ***********/
/* 全幅指定 */
.full-width {
    margin: 0 calc(50% - 50vw);
    padding: 2em calc(50vw - 50%);
}
h1.entry-title{
	background-color: #fff;
	margin: 0;
	padding: 5%;
}
.date-tags{
	display: none;
}
.entry-content {
    margin-top: 0;
    margin-bottom: 0;
}
#main, div#content.content.cf, div#content-in.content-in.wrap{
	background-color: #fff;
}

/* pタグの余白を削除 */
.wpcf7-form p {
    margin-bottom: 0;
}
/* 背景色（お好きな色に） */
section.contact {
	/* 初期値
    background-color: #e6e6e6;
	*/
	background-image: url(https://hukuohagi.com/wp-content/uploads/2023/08/azuki_bg.jpg);
	background-size: contain;
	background-repeat: repeat;
}
/*  フォームの幅（自由に変えてOK） */
.contactForm {
    max-width: 700px;
    margin: 0 auto;
}
.contactForm h2{
	background-color: transparent;
	text-align: center;
}
/* 各項目の下部余白 */
.contact_item {
	margin-bottom: 2.5rem;
}

/* 注意事項 */
.contact-wrap{
	margin-bottom: 1.5em !important;
}
.contact-title{
	text-align: center;
	font-weight: bold;
	padding-bottom: 1em;
}
.contact-notes{
	padding-bottom: 1em;
}
.contact-insta-wrap{
	text-align: center;
	margin: 0 auto;
	padding-bottom: 1em
}
a.contact-insta{
	text-decoration: none;
	color: #8d394e; 
	text-align: center;
}


/* 項目名 */
.label {
    display: block;
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
	margin-bottom: .8rem;
    font-weight: bold;
}
/* 必須タグと任意タグ共通のスタイル */
.label_tag {
    font-size: 1rem;
    color: #ffffff;
    border-radius: .3rem;
    margin-right: 1rem;
    padding: 5px 10px;
}
/* 必須タグ */
.label_must {
    background-color: #8d394e;
	color: #fff8dc;
}
/* 任意タグ */
.label_option {
    background-color: #fff8dc;
	color: #8d394e;
}
/* 名前やメールアドレスなどユーザーが入力する箇所 */
.inputs {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="text"],input[type="email"] {
    border: solid 1px #e6e6e6;
    padding: .5rem;
    font-size: 1.8rem;
}
/* お問い合わせ内容を入力する箇所 */
textarea.form-control {
    border: solid 1px #e6e6e6;
    padding: .5rem;
    height: 207px;
    font-size: 1rem;
}
/* ボタン */
.btnArea {
    text-align: center;
}
/* 戻るボタン */
input[type="button"]{
    background: #8d394e;
    border: 2px solid #8d394e;
    width: 280px;
    color: #fff8dc;
    text-align: center;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: .5em;
    text-indent: .5em;
    font-weight: bold;
    padding: 1rem 0;
	margin: 10px 0 30px 0;
    cursor: pointer;
    border-radius: .3rem;
    transition: all .3s;
}
/* 戻るボタンにホバーした時 */
input[type="button"]:hover {
    color: #8d394e;
    background-color: #fff8dc;
    border-color: #8d394e;
}

/* 送信するボタン */
input[type="submit"]{
    background: #8d394e;
    border: 2px solid #8d394e;
    width: 280px;
    color: #fff8dc;
    text-align: center;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: .5em;
    text-indent: .5em;
    font-weight: bold;
    padding: 1rem 0;
	margin: 10px 0 30px 0;
    cursor: pointer;
    border-radius: .3rem;
    transition: all .3s;
    
}
/* 送信するボタンにホバーした時 */
input[type="submit"]:hover {
    color: #8d394e;
    background-color: #fff8dc;
    border-color: #8d394e;
}
/* ローダー */
.wpcf7 .ajax-loader {
    display: block;
    margin: 0 auto;
}
.wpcf7-spinner{
	display: none;
}
.contactForm_backbtn,
.contactForm_sendbtn,
.contactForm_backbtn-title,
.contactForm_sendbtn-title
{
	text-align: center;
}
/***************************/

span.twodaysago{
	font-weight: bold;
	color: red;
	text-decoration: red wavy underline;
}


/* お問い合わせ暫定ページ */
.reserve_btn-overwrap{
	margin-bottom: 1.62rem;
}
.contact-stop_text, .reserve_btn--tel-pc, .contact-stop_reservetext{
	width: 90%;
	margin: 0 auto;
}

p.contact-insta-wrap{
	margin-bottom: 1rem;
	background-color: #8d394e;
	border-radius: 5px;
	padding: 1rem 0;
	width: 90%;
	margin: 0 auto;
		-webkit-box-shadow: 0 5px 0 #fff8dc;
		box-shadow: 0 5px 0 #fff8dc;
}
a.contact-insta{
	color: #fff;
}

/*** pcとスマホで電話番号表示を切り替え ***/
.reserve_btn--tel-pc{
	display: block;
}
a.reserve_btn.reserve_btn--tel{
	display: none;
}





/************************************
** お問い合わせ(ここまで)
************************************/




/************************************
**
** フッター(ここから)
**
************************************/
#footer{
	position: relative;
	z-index: 100;	
	font-size: 1rem;
}

/* メニュー上のグレー帯を削除 */
.footer {
	margin-top: 0;
}

/* メニューリストの空白詰め */
#nav_menu-2{
	margin-top: 5rem;
}
.widget_nav_menu ul li a{
	padding: 0 0;
}
.navi-footer-in{
	display: none;
}

#media_image-2 a:hover{
	background-color: #8d394e;
}
/************************************
**
** フッター(ここまで)
**
************************************/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1300px以下：トップの動画背景切り替え専用*/
@media screen and (max-width: 1300px){
	/* PC版と1500px以下版とで背景の入れ替え */
	.hukuohagi-fv_bgvideo-wrap{
		display: none;
	}
	.fview_main-contents{
		display: block;
	}
	
	/* スマホ背景透過用ブロックを表示 */
	.top_fv-transparent{
		display: block;
		background-image: url('https://hukuohagi.com/wp-content/uploads/2023/09/respo-top-charwhitev2.png');
		background-size: 600px;
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
		width: 100%;
		height: auto;
		position: relative;
		z-index: 100;
	}
	/* 背景透過のフロント画面 */
	.top_fv-transparent_spacer{
		width: 100%;
		height: 75vh;
	}
	/* ----- 背景用のスライドショー ----- */
	.fview_main-contents{
		position: absolute;
		width: 100%;
		height: 90%;
	}
	.fview_main-contents{
		position: fixed;
	}
	/* ズームアニメーション */
	.fview_main-contents_slideshow img {
		width: 100%;
		height: 100vh;
		max-height: 700px;
		object-fit: cover;
	}
	@keyframes zoomUp {
 	 0% {
  	  transform: scale(1);
 	 }
  	100% {
  	  transform: scale(1.15); 
 	 }
	}
	.add-animation {
  		animation: zoomUp 10s linear 0s normal both;
	} 
} 
	/*** 販売休止中表示 ****/
	.list_leftcommodity_main-flex_right_pc-title_pause{
		font-size: 14px;
	}
	/***********************/

/*1300px以下ここまで*/

/*1270px以下
@media screen and (max-width: 1270px){
	.list_leftcommodity-bg, .list_rightcommodity-bg{
		height: 120%;
	} 
}
*/

/*1200px以下*/
@media screen and (max-width: 1200px){
	.top_about_message, .top_hope_message, .top_shop_message{
		height: 100%;
	}
	.top_about_img-wrapper img, .top_hope_img-wrapper img, .top_shop_img-wrapper img{
		height: 30vw;
	}
	.list_leftcommodity-bg, .list_rightcommodity-bg{
		height: 120%;
	}
}

/*1024px以下*/
@media screen and (max-width: 1024px){
  /*必要ならばここにコードを書く*/
	
	/***********************************************
	***
	*** TOPページ
	***
	***********************************************/
	#main{
		padding: 0;
	}
	
	/* フローティングハンバーガーメニュー */
	.sidebar-btn p{
		font-size: 0.8rem;
	}
	
	/* PC版とスマホ版とでタイトルの切り替え */
	.top_about_message-title--respo{
		display: block;
		background-color: #fff;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		color: #8d394e;
		padding-top: 5%;
	}
	.top_hope_message-title--respo, .top_shop-title--respo{
		display: block;
		background-color: #fff;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		color: #8d394e;
		margin: 30px 0;
		padding: 3% 0;
	}
	.top_about_message-title--respo p{
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.top_hope_message-title--respo p, .top_shop-title--respo p{
		margin-bottom: 0;
	}
	.top_about_message-title, .top_hope_message-title, .top_shop_message-title{
		display: none;
	}

	.top_main-contents{
		padding-top: 0;
	}

	/*************************************/
	/*** 新着情報
	/*************************************/
	.top_new-info {
	    padding: 0;
	}
	.top_new-info_flex-wrap{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	.top_new-info_left-wrap{
		width: 90%;
		margin: 0 auto;
	}
	.top_new-info_right-wrap{
		width: 90%;
		margin: 0 auto;
	}
	.top_new-info_left_news-title p, .top_new-info_left_calendar-title p{
		margin-top: 30px;
		margin-bottom: 10px;
	}
	
	/* インスタグラムの表示箇所変更 */
	.top_new-info_right-wrap{
		display: none;
	}
	.top_new-info_right-wrap_respo{
		display: block;
		background-color: #fff;
		position: relative; /*必ず必要*/
		z-index: 2; /*必ず必要*/
	}
	div.top_new-info_right-wrap_respo{
		margin-bottom: 0;
	}
	.top_new-info_right-wrap_respo-outline{
		width: 90%;
		margin: 0 auto;
	}
	.top_new-info_right_Instagram-title p{
		padding-top: 5%;
	}
	.top_bottom-margin {
	    background-color: #fff;
	}
	/*************************************/
	/*** 福おはぎについて
	/*************************************/
	/***** 背景サイズ *****/
	.top_about{
		padding: 0;
		width: 100%;
	}
	
	/* top_about_message の設定をこっちに変更*/
	.top_about_Wrapper {
    	height: auto;
    	margin: 0 auto;
    	padding: 0;
	    border: 1px solid #555;
   	 background-color: #fff;
   	 box-shadow: 2px 2px 4px gray;
	}
  
	/* PC版のアウトフレームを消去 */
	.top_about_message {
		position: static;
		border: none;
		background-color: transparent;	
		box-shadow: none;
		margin: 0 auto;
	}
  
  	/* タイトルを横書きに変更 */
	.top_about_message-title {
		position: static;
		margin: 30px 0;
	}
	.top_about_message-title_vertical {
		writing-mode: horizontal-tb;
	}
  
	/* 文章の横幅を調整 */
	.top_about_message-text {
		font-size: 2rem;
		line-height: 1.6;
		width: 100%;
	}
	p.top_about_message-text{
		margin: 30px 0; 
		font-size: 12px;
	}
  
	.top_about_img-wrapper {
		position: static;
		text-align: center;
	}
	.top_about_img-wrapper img{
		width: 70%;
		height: auto;
	}

  
  
	/*************************************/
	/*** 福おはぎの想い
	/*************************************/
	.top_hope{
		padding: 0;
	}
 	/***** 背景サイズ *****/
 	/* top_about_message の設定をこっちに変更*/
 	.top_hope_Wrapper {
		height: auto;
		margin: 0 auto;
		padding: 0;
		border: 1px solid #555;
		background-color: #fff;
		box-shadow: 2px 2px 4px gray;
	}
  
	/* PC版のアウトフレームを消去 */
	.top_hope_message {
		position: static;
		border: none;
		background-color: transparent;
		box-shadow: none;
		margin: 0 auto;
	}
  
	/* タイトルを横書きに変更 */
	.top_hope_message-title {
		position: static;
		margin: 30px 0;
	}
	.top_hope_message-title_vertical {
		writing-mode: horizontal-tb;
	}
  
	/* 文章の横幅を調整 */
	.top_hope_message-text {
		line-height: 1.6;
		width: 100%;
	}
	p.top_hope_message-text{
		margin: 30px 0;
		font-size: 12px;
	}
  
	.top_hope_img-wrapper {
		position: static;
		text-align: center;
	}
	.top_hope_img-wrapper img{
		width: 70%;
		height: auto;
		margin-bottom: 30px;
	}

	/*************************************/
	/*** 店舗情報
	/*************************************/
	.top_shop{
		padding: 0;
	}
	/* top_about_message の設定をこっちに変更*/
	.top_shop_Wrapper {
    	height: auto;
    	margin: 0 auto;
    	padding: 0;
	    border: 1px solid #555;
   	 	background-color: #fff;
   	 	box-shadow: 2px 2px 4px gray;
	}
  
	/* PC版のアウトフレームを消去 */
	.top_shop_message {
		position: static;
		border: none;
		background-color: transparent;	
		box-shadow: none;
		margin: 0 auto;
	}
  
  	/* タイトルを横書きに変更 */
	.top_shop_message-title {
		position: static;
		margin: 30px 0;
	}
	.top_shop_message-title_vertical {
		writing-mode: horizontal-tb;
	}
  
	/* 文章の横幅を調整 */
	.top_shop_message-text {
		font-size: 2rem;
		line-height: 1.6;
		width: 100%;
	}
	p.top_shop_message-text{
		margin: 30px 0; 
		font-size: 12px;
	}
  
	.top_shop_img-wrapper {
		position: static;
		text-align: center;
	}
	.top_shop_img-wrapper img{
		width: 70%;
		height: auto;
	}

	/*************************************/
	/*** フッター
	/*************************************/
	.footer-widgets {
    	margin: 10px auto;
    	display: flex;
	}
	div.footer-left{
		width: 45%;
	}
	div.footer-center{
		width: 25%;
	}
	div.footer-right{
		width: 30%;
	}
	/***********************************************
	***
	*** トップページ(ここまで)
	***
	***********************************************/
	
	
	/***********************************************
	***
	*** 商品一覧
	***
	***********************************************/
	/******** 左写真コンテンツ(ここから) ********/
	/* タイトル表示を変更 */
	.list_leftcommodity_main-flex_right_pc-title{
		display: none;
	}
	.list_leftcommodity_main-flex_left_phonetitle{
		display: block;
		font-size: 0.8rem;
	}
	
	/* フレックス解除*/
	.list_leftcommodity_main-flex{
		display: block;
	}
	
	/* 木目の配置 */
	.list_leftcommodity-bg{
		position: absolute;
		top: 0;
		left: 7%;
		max-width: 85%;
		width: 85%;
		height: 105%;
		background-image: url("https://hukuohagi.com/wp-content/uploads/2023/08/item_bgimg.jpg");
		z-index: -1;
		box-shadow: 2px 2px 4px gray;
	}
	
	/* 写真成形・配置＆phonetitleの位置指定 */
	.list_leftcommodity_main-flex_left_img {
		position: absolute;
		top: -25px;
		left: -46px;
		z-index: 1;
		filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
	}
	.list_leftcommodity_main-flex_left_img img {
		clip-path: circle(40% at 50% 50%); 
		height: auto;
		width: 200px;
		object-fit: fill; 
		margin-bottom: 30px;
	}
	.list_leftcommodity_main-flex_left_phonetitle{
		position: absolute;
		top: 35px;
		left: 150px;
		font-size: 1rem;
	}
	.list_leftcommodity_main-flex_left_phonetitle h3{
		font-size: 1rem;
	}

	
	/* テキストの配置 */
	.list_leftcommodity_main-flex_right{
  		position: absolute;
  		top: 30%;
		left: 10%;
  		z-index: 1;
	}
	.list_leftcommodity_main-flex_right_message{
  		font-size: 0.8rem;
	}
	.list_leftcommodity_main-flex_right_message p{
		font-size: 0.8rem;
		width: 180%;
	}
	.list_leftcommodity_main-flex_right_message-bold{
		font-size: 0.8rem;
 		font-weight: bold;
	}
	/******** 左写真コンテンツ(ここまで) ********/


	/******** 右写真コンテンツ(ここから) ********/
	/* タイトル表示を変更 */
	.list_rightcommodity_main-flex_left_pc-title{
		display: none;
	}
	.list_rightcommodity_main-flex_right_phonetitle{
		display: block;
	}
	
	/* フレックス解除 */
	.list_rightcommodity_main-flex{
		display: block;
	}
	
	/* 木目の配置 */
	.list_rightcommodity-bg{
  		position: absolute;
  		top: 0;
  		right: 7%;
  		max-width: 85%;
  		width: 85%;
  		height: 105%;
  		background-image: url("https://hukuohagi.com/wp-content/uploads/2023/08/item_bgimg.jpg");
  		box-shadow: 2px 2px 4px gray;
  		z-index: -1;
	}
	
	/* 写真成形・配置＆phonetitleの位置指定 */
	.list_rightcommodity_main-flex_right_img{
		position: absolute;
		top: -25px;
		right: -50px;
		filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
		z-index: 1;
	}
	.list_rightcommodity_main-flex_right_img img {
 		clip-path: circle(40% at 50% 50%); 
 		height: auto;
 		width: 200px;
 		object-fit: fill; 
 		margin-bottom: 30px;
	}
	.list_rightcommodity_main-flex_right_phonetitle{
		position: absolute;
		top: 35px;
		left: 45px;
		font-size: 1rem;
	}
	.list_rightcommodity_main-flex_right_phonetitle h3{
		font-size: 1rem;
	}

	/* テキストの配置 */
	.list_rightcommodity_main-flex_left{
  		position: absolute;
  		top: 30%;
  		left: 10%;
  		z-index: 1;
	}

	.list_rightcommodity_main-flex_left_message{
  		font-size: 0.8rem;
	}
	.list_rightcommodity_main-flex_left_message p{
  		font-size: 0.8rem;
  		width: 180%;
	}
	.list_rightcommodity_main-flex_left_message-bold{
		font-size: 0.8rem;
  		font-weight: bold;
	}

	/******** 右写真コンテンツ(ここまで) ********/
		
	
	/***********************************************
	***
	*** 商品一覧(ここまで)
	***
	***********************************************/
}


/*920px以下*/
@media screen and (max-width: 920px){
	/*必要ならばここにコードを書く*/
	/* スマホ背景透過用ブロックを表示 */
	.top_fv-transparent{
		background-size: 450px;
		width: 100%;
		height: auto;
	}
	/* 背景透過のフロント画面 */
	.top_fv-transparent_spacer{
		width: 100%;
		height: 50vh;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/***********************************************
	***
	*** トップページ
	***
	***********************************************/
	/* フローティングハンバーガーメニュー */
	.sidebar-btn{
		margin-top: 50%;
	}
	.sidebar-btn_float{
		display: block;
	}
	.sidebar-btn_float_right{
		display: none;
	}
	
	/* フッターウィジェット */
	div.footer-left{
		display: none;
	}
	div.footer-center{
		display: none;
	}
	div.footer-right{
		display: none;
	}
	/***********************************************
	***
	*** トップページ(ここまで)
	***
	***********************************************/
	
	/***********************************************
	***
	*** 商品一覧(ここから)
	***
	***********************************************/

	/* 予約リンク */
	.commoditylist-reserved{
		font-size: 0.8rem;
	}
	/***********************************************
	***
	*** 商品一覧(ここまで)
	***
	***********************************************/
	
	
	/***********************************************
	***
	*** お問い合わせ(ここから)
	***
	***********************************************/	
	section.contact{
		padding: 0 10%;
	}
	/***********************************************
	***
	*** お問い合わせ(ここまで)
	***
	***********************************************/
}

/*580px以下*/
@media screen and (max-width: 580px){
	.list_leftcommodity-bg, .list_rightcommodity-bg{
		height: 120%;
	} 
}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

	/***********************************************
	***
	*** トップページ
	***
	***********************************************/
	/* フローティングハンバーガーメニュー */
	.hamburger-menu + .sidenavs:target {
		width: 50%;
	}
	
	/* スライドショー */
	/* 縦長背景に入れ替え */
	.hukuohagi-fv_bgvideo-wrap, .fview_main-contents{
		display: none;
	}
	.fview_main-contents-respo{
		display: block;
	}
	
	/* スマホ背景透過用ブロックを表示 */
	.top_fv-transparent{
		display: block;
		background-size: 350px;
	}
	/* 背景透過のフロント画面 */
	.top_fv-transparent_spacer{
		width: 100%;
		height: 75vh;
	}
	/* ----- 背景用のスライドショー ----- */
	.fview_main-contents-respo{
		position: absolute;
		width: 100%;
		height: 90%;
	}
	.fview_main-contents-respo{
		position: fixed;
	}
	/* ズームアニメーション */
	.fview_main-contents_slideshow img {
		width: 100%;
		height: 100vh;
		max-height: 700px;
		object-fit: cover;
	}
	@keyframes zoomUp {
 	 0% {
  	  transform: scale(1);
 	 }
  	100% {
  	  transform: scale(1.15); 
 	 }
	}
	.add-animation {
  		animation: zoomUp 10s linear 0s normal both;
	} 
	
	/* お知らせ */
	div.new-entry-card-title.widget-entry-card-title.card-title{
		font-size: 12px;
	}
	.category-news-post, .related-entry-heading{
		width: 90%;
		margin: 0 auto;
	}
	/***********************************************
	***
	*** トップページ(ここまで)
	***
	***********************************************/
	
	/***********************************************
	***
	*** 商品一覧
	***
	***********************************************/
	/* 本文 */
	.list_leftcommodity_main-flex_right_message p{
  		font-size: 0.7rem;
	}
	.list_rightcommodity_main-flex_left_message p{
  		font-size: 0.7rem;
	}
	/***********************************************
	***
	*** 商品一覧(ここまで)
	***
	***********************************************/
	
	/***********************************************
	***
	*** お問い合わせ(ここから)
	***
	***********************************************/	
	.reserve_btn--tel-pc{
		display: none;
	}
	a.reserve_btn.reserve_btn--tel{
		display: block;
	}
	
	/*** ボタン設定 ***/
	.reserve_btn-wrap{
		width: 90%;
		margin: 0 auto;
	}
	.reserve_btn,
	a.reserve_btn,
	button.reserve_btn {
	  font-size: 1.6rem;
	  font-weight: 700;
	  line-height: 1;
	  position: relative;
	  display: inline-block;
	  padding: 1rem 4rem;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  -webkit-transition: all 0.3s;
	  transition: all 0.3s;
	  text-align: center;
	  vertical-align: middle;
	  text-decoration: none;
	  letter-spacing: 0.1em;
	  border-radius: 0.5rem;
	}

	.reserve_btn-wrap-pc-sp {
	  max-width: 435px;
	  margin: 0 auto 20px;
	}

	a.reserve_btn-pc-sp {
	  line-height: 1.4;
	  width: 49.5%;
	  padding: 1.25rem 0;
	  color: #ffff;
	}

	p.reserve_btn-message{
		margin-bottom: 0;
	}

	.fa-position-left {
	  position: absolute;
	  top: calc(50% - 0.5em);
	  left: 1.5rem;
	}

	.fa-position-right {
	  position: absolute;
	  top: calc(50% - 0.5em);
	  right: 2rem;
	}

	a.reserve_btn--tel {
		display: block;
		margin-top: 15px;
		padding: 1rem 0;
		color: #fff;
		background: #8d394e;
		-webkit-box-shadow: 0 5px 0 #fff8dc;
		box-shadow: 0 5px 0 #fff8dc;
	}
	.reserve_btn, a.reserve_btn, button.reserve_btn{
		font-size: 1rem;
	}
	
	/* 電話ボタン */
	a.reserve_btn--tel i {
		font-size: 2rem;
		}

	a.reserve_btn--tel i.fa-position-left {
		font-size: 2rem;
		}

	a.reserve_btn--tel .number {
		line-height: 1;
		display: inline-block;
		margin-top: 0.5rem;
		padding: 0.25rem 1.5rem;
		letter-spacing: 0;
		border-radius: 0.5rem;
		background: #fff;
		color: #8d394e;
	}

	a.reserve_btn--tel:hover {
		color: #fff;
	}
	/***********************************************
	***
	*** お問い合わせ(ここまで)
	***
	***********************************************/	
	
	
	
}



/*380px以下*/
@media screen and (max-width: 380px){
	/*必要ならばここにコードを書く*/
	
	/* Cookie表示 */
	a#cn-more-info.cn-more-info.cn-button{
		margin-top: 3%;
	}

	/***********************************************
	***
	*** 商品一覧
	***
	***********************************************/
	.spacer20vh{
		height: 180px;
		height: 30vh;
		width: 100%;
	}
	/* タイトル */
	.list_leftcommodity_main-flex_left_phonetitle h3{
		font-size: 0.8rem;
	}
	.list_rightcommodity_main-flex_right_phonetitle {
		left: 30px;
	}
	.list_rightcommodity_main-flex_right_phonetitle h3{
		font-size: 0.8rem;
	}
	
	/* 本文 */
	.list_leftcommodity_main-flex_right_message p{
  		font-size: 0.6rem;
	}
	.list_rightcommodity_main-flex_left_message p{
  		font-size: 0.6rem;
	}

	/* 料金 */
	.list_leftcommodity_main-flex_right_message-bold{
		font-size: 0.6rem;
	}
	.list_rightcommodity_main-flex_left_message-bold{
		font-size: 0.6rem;
	}
	
	/***********************************************
	***
	*** 商品一覧(ここまで)
	***
	***********************************************/
}/* 380px以下 */