/*
Theme Name: BakeryColne
Text Domain: bakerycolne
Domain Path: /languages
Version: 0.3
Tested up to: 5.9.2
Requires at least: 
Requires PHP: 7.4.21
Description: Na2factoryのオリジナルテーマ。架空のパン屋さんBakeryColne（ベーカリーコルネ）のテーマです。
Author: Na2factory
Author URI: https://na2-factory.com/
Theme URI: 
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* HTMLからWordPress化する
制作メモ
22.03.17
-----------------------------------------------
①cssの階層を変える
HTMLでは css/*.css
だったが、メインのスタイル記述は上の階層のstyle.cssに書く
css/*.cssに置くのはライブラリ系やリセットcssとする


-----------------------------------------------
*/

/* 2022.03 ver0.1 by Na2 factory */
/* For Demo-Site BakeryColne */
@charset 'UTF-8';
/*
命名規則
BEM（Block,Element,Modifier）
.block__element{}
.block--modifier{}

Block名のクラス名はb-から始める
.b-*** {}

add SMACSS
ページ内の大きなレイアウトでの括りのクラス名はl-から始める
.l-***{}

ユーティリティクラス：汎用的な機能の単独のクラスu-から始める
.u-***{}

================================================ */

/*
Base
土台となる部分

================================================ */

/* Colors 使用する色について　プロジェクトの色を設定*/

:root {
  --white: #fff;
  --grey: #707070;
  --litgrey: #f4f4f4;
  --charcoal: #5D5741;
  --key_beige: #BFB486;
  /* rgb(191, 180, 134) */
  --key_green: #96afa3;
  /* rgb(150, 175, 163) */
  --red: #C36A69;
}

/* Base */

html {
  font-size: 16px;
  /* スムーズスクロール iOS・Safariで無効*/
  scroll-behavior: smooth;

}

body {
  /* overflow: hidden; */
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 0.875rem;
}

em {
  font-style: normal;
  font-weight: bold;
}

a {
  /* color: #333; */
  text-decoration: underline;
}

a:hover {
  /* color: #0068b7; */
  text-decoration: none;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

a:hover svg {
  opacity: 0.7;
  filter: alpha(opacity=70);
}


img {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

/* floatの回り込み解除用 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* markタグの色変更 */
mark {
  background-color: var(--key_beige);
}

/*
使用するフォント
font-family: 'Noto Sans JP', sans-serif;
font-family: 'RocknRoll One', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
*/
/* Web font サブセット化　日本語のみ */
@font-face {
  font-family: 'RocknRoll One';
  font-weight: 400;
  src: url("./font/RocknRollOne-Regular-subset.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 100;
  src: url("./font/NotoSansJP-Thin-subset.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 300;
  src: url("./font/NotoSansJP-Light-subset.woff") format("woff");
  font-display: swap;
}

/* 22.03.18 Ubuntuも自前で読み込む */
@font-face {
  font-family: 'Ubuntu';
  font-weight: 400;
  src: url("./font/Ubuntu-Regular.ttf") format("ttf");
  font-display: swap;
}


/* 全体の横方向のレイアウト・余白の設定 */
.wrapper {
  margin: 0 auto;
  width: min(87.5%, 960px);
  overflow: hidden;
}

.hero-wrapper {
  margin: 0 auto;
  width: 100%;
  /* width: min(87.5%,1120px); */
  overflow: hidden;
}

.banner-wrapper {
  margin: 0 auto;
  width: min(87.5%, 960px);
  /* 焼きたて予約のバナーにはbox-shadowを入れたい為、overflow:hiddenを外す */
  /* overflow: hidden; */
}


.concept-wrapper {
  margin: 0 auto;
  width: 100%;
  /* width: min(87.5%,1120px); */
  overflow: hidden;
}

.concept-imgset-wrapper {
  margin: 0 auto;
  width: min(87.5%, 960px);
  /* overflow: hidden; */
}

.pickup-imgset-wrapper {
  margin: 0 auto;
  /* width: min(87.5%,960px); */
  overflow: hidden;
  width: 100%;
}

.shopmap-wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}

.footer-wrapper {
  margin: 0 auto;
  /* width: 100%; */
  width: min(87.5%, 960px);
  overflow: hidden;
}

/* about.html menu.html information.html */
.sub-top-wrapper {
  margin: 0 auto;
  width: 100%;
  /* width: min(87.5%,1120px); */
  overflow: hidden;
}

.about-txt-wrapper {
  margin: 0 auto;
  width: min(87.5%, 760px);
  overflow: hidden;
}

.about-table-wrapper {
  margin: 0 auto;
  width: min(87.5%, 760px);
  overflow: hidden;
}



/*
Layout
header/main/sidebar/footer
基本的にページ単位で唯一の存在である要素のため、IDセレクタ推奨
================================================ */
#header {
  height: 70px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background-color: var(--white);
  z-index: 9999999;
}

#header.scroll-nav {
  /* スクロールしたらヘッダーの背景を薄くしてみる */
  background-color: rgba(244, 244, 244, .5)
}

#footer {
  /* height: 380px; */
  background-color: var(--key_beige);

}


/*
Block
IDは使用しない
　
================================================ */
/*************************************************
  for WP demo, model-window
*************************************************/
.b-overlay {
  /* rgbaを使って60%の黒いオーバーレイにする */
  background: rgba(0, 0, 0, 0.6);
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* デフォルトでは見えないようにする */
  opacity: 0;
  visibility: hidden;
  /* 表示する際の変化の所要時間 */
  transition: .3s;
  z-index: 500;
}

/* is-activeクラスのついたオーバーレイ */
.b-overlay.is-active {
  /* is-activeクラスがついたときにオーバーレイを表示する */
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ */
.b-modal {
  background-color: var(--white);
  max-width: 600px;
  width: 86%;
  /* padding: 1rem; */
  /* 位置の調整(真ん中に表示) */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* デフォルトでは非表示にしておく */
  opacity: 0;
  visibility: hidden;
  /* 表示の変化にかかる時間 */
  transition: .3s;
  z-index: 700;

}

/* activeクラスのついたモーダルウィンドウ */
.b-modal.is-active {
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ内の閉じるボタン */
.b-modal__close .fa-times {
  color: var(--white);
  font-size: 30px;
  position: absolute;
  top: 22px;
  right: 18px;
  cursor: pointer;
  z-index: 800;
}

.b-modal__title {
  display: block;
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.5rem;
  background-color: var(--red);
  padding: 1rem 1.25rem;
}

.b-modal__list {
  display: block;
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
  /* background-color: var(--white); */
  padding: 1rem 1.25rem;
}

.b-modal__item {
  padding: 0.5rem 0;
}

.b-modal__item .fa-check-square {
  color: var(--red);
  font-size: 16px;
  padding-right: 0.5rem;
}

/*************************************************
  loading for index.html
*************************************************/

#js-b-loading {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  transition: all 1s .1s;
  background-color: var(--key_green);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  display: grid;
  justify-items: center;
  align-content: center;
}

.b-loading-spinner {
  margin: 0 auto;
  /* width: 100px; */
  text-align: center;
}

.b-loading-spinner>div {
  width: 18px;
  height: 18px;
  margin: .5rem;
  background-color: var(--white);

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.b-loading-spinner .b-loading-spinner-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.b-loading-spinner .b-loading-spinner-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0)
  }

  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* jsでwindowの読み込みが完了を検知したら、ローディング画面を消すクラス */
.loading-done {
  opacity: 0;
  visibility: hidden;
}


/*************************************************
  header
*************************************************/

/*========= headerのロゴとメニュー ===============*/
/* .b-header-inner{
    height: 100%;
    background-color: var(--white);
} */

/*========= headerのハンバーガーメニューのためのCSS ===============*/
.b-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 10px;
  position: relative;
}

.b-header-logo a {
  display: block;
}

.b-header-logo-svg {
  width: 220px;
  height: 40px;
  fill: var(--charcoal);
}

/* .b-header-logo-svg a {
  display: block;
} */

/* .b-header-logo-svg a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
} */


.b-header-btn {
  /* position: fixed; */
  /*   */
  position: relative;
  z-index: 9999;
  /*ボタンを最前面に*/
  /* top: 25px;
  right: 0px; */
  top: 4px;
  cursor: pointer;
  width: 24px;
  height: 50px;
}

/* ×に変化 */

.b-header-btn span {
  display: inline-block;
  transition: all .4s .1s;
  position: absolute;
  /* left: 14px; */
  right: 0px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--charcoal);
  /* width: 45%; */
  width: 100%;
}

.b-header-btn span:nth-of-type(1) {
  top: 15px;
}

.b-header-btn span:nth-of-type(2) {
  top: 23px;
}

.b-header-btn span:nth-of-type(3) {
  top: 31px;
}

.b-header-btn.active span:nth-of-type(1) {
  top: 18px;
  /* left: 18px; */
  right: 0px;
  transform: translateY(6px) rotate(-45deg);
  /* width: 30%; */
  width: 100%;
  background-color: var(--white);

}

.b-header-btn.active span:nth-of-type(2) {
  opacity: 0;
}

.b-header-btn.active span:nth-of-type(3) {
  top: 30px;
  /* left: 18px; */
  right: 0px;
  transform: translateY(-6px) rotate(45deg);
  /* width: 30%; */
  width: 100%;
  background-color: var(--white);

}

/*========= グローバルナビ ===============*/

.b-gnavi {
  position: fixed;
  /* inset:0; */
  z-index: 100;
  background: rgba(191, 180, 134, .8);
  width: 0;
  /* position: absolute; */
  top: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  transition: opacity .4s .2s;
}

.b-gnavi-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* gap: 40px; */
}

.b-gnavi-list__menu {
  color: var(--white);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 1.5rem;
}

/* font  UbuntuがWebFontだとサイズが大きすぎるので
日本語表示にはこのモディファイアでサイズ調整*/
.b-gnavi-list__menu--jp {
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.0rem;
}

/* sns 横並びに配置　*/
.snslist {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.snslist>li {
  padding: 0 1.25rem;
}

.b-gnavi-list__menu a {
  text-decoration: none;
}


.b-gnavi-list>li {
  text-align: center;
  margin-bottom: 1.25rem;
}


.b-gnavi.open-menu {
  width: 100%;
  transition: all .5s .1s;
}

/* .b-gnavi.open-menu .b-gnavi-list a { */
.b-gnavi.open-menu .b-gnavi-list__menu a {
  display: block;
  width: 100vw;
  /* padding:1rem; */
}

.b-gnavi.open-menu .b-gnavi-list .snslist a {
  width: 50px;
}

.b-gnavi-list a:hover {
  color: var(--charcoal);
}

/* グローバルナビの表示中は下の画面を無駄にスクロールしないようにしたかった */
/* position: fixed; からoverflow: hiddenへ変更　*/
/* position: fixed;だとfirefoxでスクロールしてからメニュー表示でヘッダーが消える */

.is-open-menu body {
  /* position: fixed; */
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

/*========= headerのメニュー jsが動かないブラウザ用 通常は非表示　===============*/
.b-gnavi-pc {
  display: none;
}

/* for WP カスタムメニューの調整 */
.b-gnavi.open-menu .b-gnavi-list__menu--remsns>a {
  /* visibility: hidden; */
  display: none;
}

/*************************************************
  hero
*************************************************/
.b-hero-inner {
  height: 420px;
  /* height: clamp(420px,50vh,728px); */
  margin-bottom: 1.5rem;
}

.b-hero-swiper {
  height: 100%;
}

/*========= 1枚目 ===============*/
.b-hero-cover01 {
  height: 100%;
  background-image: url(./images/top-syokupan.jpg);
  background-position: center;
  background-size: cover;
  display: grid;
  justify-items: center;
  align-content: center;

  position: relative;
  z-index: -1000;

}

/* キャッチコピーの背景の白いぼかしの円 */
.b-hero-cover01-bg {
  aspect-ratio: 1 / 1;
  /* background: radial-gradient(circle, rgb(var(--charcoal)), rgba(var(--white))); */
  background: radial-gradient(circle, rgba(244, 244, 244, 1), rgba(244, 244, 244, .8));
  /* background-color: #fff; */
  border-radius: 50%;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  width: clamp(160px, 20%, 260px);

  position: relative;
  z-index: -500;

}

@supports not (aspect-ratio: 1/1) {
  .b-hero-cover01-bg {
    width: 160px;
    height: 160px;
  }
}

/* span */
.b-hero-cover01-bg__txt {
  font-family: 'RocknRoll One', sans-serif;
  /* font-size: 1.25rem; */
  font-size: 1.25rem;
  color: var(--charcoal);

  display: inline-block;
  text-align: center;
  /* width: min(160px, 260px); */
  width: clamp(160px, 20%, 260px);

  position: absolute;
  z-index: 1000;
  left: 50;
  top: 50%;
  transform: translateY(-50%);

}


/*========= 2枚目 ===============*/
.b-hero-cover01--img02 {
  background-image: url(./images/about-top.jpg);
}


.b-hero-cover02 {
  height: 100%;
  background-image: url(./images/about-top.jpg);
  background-position: center;
  background-size: cover;
  display: grid;
  justify-items: center;
  align-content: center;

  position: relative;
  z-index: -1000;

}

.b-hero-cover01-bg--img02 {
  background: radial-gradient(circle, rgba(191, 180, 134, 1), rgba(191, 180, 134, .8));
  -webkit-filter: blur(5px);
  filter: blur(5px);

}


/* span */
.b-hero-cover01-bg__txt--img02 {
  color: var(--white);

}

.b-hero-cover02-bg__txt {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 1.25rem;
  /* color: var(--charcoal); */
  color: var(--white);

  display: inline-block;
  text-align: center;
  width: min(160px, 260px);

  position: absolute;
  z-index: 1000;
  left: 50;
  top: 50%;
  transform: translateY(-50%);

}

/*========= 3枚目 ===============*/
.b-hero-cover01--img03 {
  background-image: linear-gradient(rgba(144, 144, 144, .5), rgba(144, 144, 144, .5)), url(./images/about-welcome.jpg);
  /* background-color: #909090; */
  /* background-blend-mode: overlay; */
}

/* SVGを外部ファイルで読み込むと表示されなくても空白が挿入される */
/* 外部ファイルのsvgをdisplay:noneで消す 外部ファイルないでつけたクラス名 */
.svg-icon {
  /* display: none; */
}

/* SVGの大きさを調整できる & colorの値がSVGの色設定になる*/
.b-hero-cover03-bg {
  width: min(60%, 560px);
  padding-bottom: .5rem;
  color: var(--white);
}

/* .b-hero-cover03-bg>svg { */
.b-hero-cover03-bg-logo {
  width: 100%;
  fill: currentColor;
  /* fill: var(--key_green); */
}

.b-hero-cover03-bg-logo>.logo-part1 {
  fill: var(--key_green);
}

.b-hero-cover03-bg-logo>.logo-part2 {
  fill: var(--key_beige);
}


/* この指定は無しでOK */
.b-hero-cover03-bg>svg viewBox {
  /* width: 100%; */
  /* fill: currentColor; */
}


/* span */
.b-hero-cover03-bg__txt {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 1rem;
  /* font-size: clamp(16px,5%,1.25rem); */
  color: var(--white);

  display: inline-block;
  text-align: center;
  /* width: min(160px, 260px); */
  width: min(60%, 280px);

  /* position: absolute;
  z-index: 1000;
  left: 50;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); */

}

/*************************************************
  焼きたてbanner
*************************************************/
.banner-under {
  background-color: var(--white);
}

.b-banner-inner {
  /* 余白 */
  padding-bottom: 1.5rem;
  /* margin-bottom: 1.5rem; */
}

.b-banner-inner>a {
  display: inline-block;
  /* box-shadow 0 0 で周囲にシャドウを付ける。10pxはぼかす値  */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

}

.b-banner-inner>a:hover {

  /* ボタンを押したらぐっと下に下がる */
  /* box-shadow 10px 10px 左右と上下 20px ぼかし -10px ぼかす範囲 */
  box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.2);
  transform: translateY(3px);
  transition: all .3s .1s ease;
}


/*************************************************
  welcome txt
*************************************************/
.b-welcom-inner {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.b-welcom-txt {
  text-align: center;
  line-height: 2;

}

/*************************************************
  information
*************************************************/
.b-info-inner {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* date */
.b-info-inner-list {
  margin: 0 auto;
  text-align: center;
  /* padding-bottom: 1rem; */
  /* margin-bottom: 1.5rem; */
}

.b-info-inner-list__date {
  color: var(--key_green);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
  margin-bottom: .5rem;

}

.b-info-inner-list__txt {
  margin: 0 auto;
  text-align: center;
  width: min(100%, 560px);
  border-bottom: dashed 1px rgb(112, 112, 112);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;

}

.b-info-inner-list__link {
  text-decoration: none;
}

.b-info-inner-list__link:hover {
  text-decoration: underline;
}

/* for WP  */
.b-info-inner-list__noinfor {
  margin: 0 auto;
  text-align: center;
  width: min(100%, 560px);
  /* border-bottom: dashed 1px rgb(112, 112, 112); */
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;

}


/*************************************************
  concept
*************************************************/
/* conceptのタイトル部分と画像部分　innerをわける */
/* conceptのタイトル部分 */
.b-concept-top-inner {
  /* padding-bottom: 1rem; */
  margin-bottom: 1.5rem;
}

.b-concept-top-inner-txt {
  margin: 0 auto;
  text-align: center;
}

/* conceptの画像部分 ここから*/
.b-concept-img-inner {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* conceptの画像部分 写真と説明文のset SPでは縦並び*/
.b-concept-img-inner-set {
  display: flex;
  flex-direction: column;
}

.b-concept-img-inner-set-picture {
  min-height: 320px;
  background-image: url(./images/concept/top-butter.jpg);
  background-position: center;
  background-size: cover;

}

/* Modeifier */
.b-concept-img-inner-set-picture--img02 {
  background-image: url(./images/concept/top-egg.jpg);
  background-position: bottom;
}

.b-concept-img-inner-set-picture--img03 {
  background-image: url(./images/concept/colne_anypans.jpg);
}

.b-concept-img-inner-set-txt {
  min-height: 240px;
  background-color: var(--key_green);

  /* display: flex;
  flex-direction: column;
  align-items: center; */
}

.b-concept-img-inner-set-txt__heading {
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 1.25rem;
  text-align: center;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.b-concept-img-inner-set-txt__desp {
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 0.875rem;
  text-align: center;
  /* 文字数の最小幅の指定 */
  min-width: 17em;

}

/*************************************************
  pickup
*************************************************/
/* pickupのタイトル部分と画像部分　innerをわける */
/* pickupのタイトル部分 */
.b-pickup-top-inner {
  /* padding-bottom: 1rem; */
  /* margin-bottom: 1.5rem; */
}

/* pickupのスライダー部分 ここから*/

.b-pickup-img-inner {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.b-pickup-swiper {
  position: relative;
  z-index: 1;
  /* width: 87.5%; */
  width: 92.5%;
  aspect-ratio: 1.36 / 1;
  /* height: 240px; */
  /* padding-bottom: 50%; */
  margin: 0 auto;
  margin-bottom: 5.0rem;
}

@supports not (aspect-ratio: 1.36 / 1) {
  .b-pickup-swiper {
    height: 240px;
  }
}

/* for WP */
.b-pickup-noswiper {
  position: relative;
  z-index: 1;
  width: 92.5%;
  aspect-ratio: 1.36 / 1;
  margin: 0 auto;
  /* margin-bottom: 5.0rem; */
}

@supports not (aspect-ratio: 1.36 / 1) {
  .b-pickup-noswiper {
    height: 240px;
  }
}

.b-pickup-slide-area {
  margin: 0 auto;
  text-align: center;
  min-height: 308px;
  /* width: 100%; */
  /* width: clamp(87.5%, 560px, 100%); */

  /* width: min(87.5%, 560px); */

  /* height: clamp(308px,100%,474px); */
  /* overflow: hidden; */
}

.b-pickup-slide-area>img {
  /* min-height: 240px; */
  /* height: 100%; */
  /* height: clamp(220px,100%,404px); */
  /* width: min(100%, 560px); */
  /* width: 100%; */

}

.b-pickup-slide-area__desc {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 1.25rem; */
  font-size: clamp(16px, 2vw, 1.5rem);
  padding-top: .5rem;
  /* padding-bottom: .5rem; */

}

.b-pickup-slide-area__price {
  color: var(--red);
  font-family: 'RocknRoll One', sans-serif;
  font-size: 1.25rem;
  font-size: .825rem;
  /* padding-top: .5rem; */
  /* padding-bottom: .5rem; */

}

/* swiper paginationの位置を調整 */
.b-pickup-swiper .swiper-horizontal>.swiper-pagination-bullets,
.b-pickup-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.b-pickup-swiper .swiper-pagination-custom,
.b-pickup-swiper .swiper-pagination-fraction {
  bottom: -4rem !important;
}

/* swiper paginationの色と大きさ、間隔の変更 */
.b-pickup-swiper .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  margin: 0 0 0 .825rem !important;
  background: var(--key_green) !important;

}

/* swiper paginationの左端の円について、不要なmarginを取り除く */
.b-pickup-swiper .swiper-pagination-bullet:first-child {
  margin: 0 !important;
}

/*************************************************
  shopmap
*************************************************/
/* Google Map レスポンシブ対応 */
.b-shopmap-inner {
  position: relative;
  /* padding-bottom: 85%;
  height: 0; */
  width: 100%;
  aspect-ratio: 1.17/1;
  /* margin-bottom: 2.5rem; */
}

@supports not (aspect-ratio: 1.17/1) {
  .b-shopmap-inner {
    height: 320px;
  }
}


.b-shopmap-inner>iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*************************************************
  page-top
*************************************************/
/* page-topボタンの配置をwrapper内にしたい */
.b-page-top {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 70px;
  z-index: 800;

}

.b-page-top-btn {
  position: absolute;
  left: calc(100% - 70px);
  z-index: 1000;
  opacity: 0;
  transition: opacity .35s .1s ease;
}

.b-page-top-btn:hover {
  cursor: pointer;
  /* opacity: 1.0; */
}


.b-page-top-arrow {
  color: var(--key_beige);
  /* font-size: 40px; */
}

.b-page-top-sq {
  color: rgba(244, 244, 244, .8);
  /* font-size: 40px; */
}

/* page-topボタンが表示されていない時はポインターにしない */
.is-hide {
  pointer-events: none;
}

/*************************************************
  footer
*************************************************/
.b-footer-inner {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
}

/* ロゴを中央寄せにする */
.b-footer-logo img {
  display: inline-block;
  margin: 0 auto;
  margin-bottom: .5rem;
}

.b-footer-logo a {
  display: block;
}

.b-footer-logo svg {
  /* display: inline-block; */
  margin: 0 auto;
  margin-bottom: .5rem;
}

.b-footer-logo-svg {
  width: 220px;
  height: 40px;
  fill: var(--charcoal);
}


.b-footer-info {
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
  margin-bottom: 1rem;
}

/* for WP プライバシーポリシー */
.b-footer-info-ppbox {
  display: block;
  margin-bottom: 1.5rem;
}

.b-footer-info-ppbox a {
  text-decoration: none;
}

.b-footer-info-ppbox a:hover {
  text-decoration: underline;
}

.b-footer-info__shopnemae,
.b-footer-info__adress,
.b-footer-info__tel,
.b-footer-info__time,
.b-footer-info__holiday {
  padding-bottom: .5rem;
}

.b-footer-navi {
  margin-bottom: .5rem;
}

.b-footer-navi-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
  margin-bottom: .5rem;
}

.b-footer-navi-list__menu {
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .100rem;
  font-size: .875rem;
  /* margin-bottom: .5rem; */
}

.b-footer-navi-list__menu a {
  display: inline-block;
  text-decoration: none;
  padding-left: .5rem;
  padding-right: .5rem;
  border-right: solid 1px var(--white);
  margin-bottom: 1rem;
}

.b-footer-navi-list__menu a:hover {
  text-decoration: underline;
}

.b-footer-navi-list__menu:last-child a {
  border-right: none;
}

/* SNS */
.b-footer-navi-snslist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 88px;
  margin: 0 auto;
  margin-bottom: 0.5rem;
}

.b-footer-navi-snslist {
  color: var(--white);
  font-size: 1.2rem;
}

/* .b-footer-inner small {
  font-size: 6px;
} */

.u-font-small {
  font-size: .5rem;
}

/* about.html */
/*************************************************
  sub-topview
*************************************************/

/*========= sub-topview背景 ===============*/
.b-sub-topview-inner {
  height: 210px;
  margin-bottom: 1.125rem;
  background-image: linear-gradient(rgba(144, 144, 144, .5), rgba(144, 144, 144, .5)), url(./images/pan-making.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: grid;
  justify-items: center;
  align-content: center;
}

.b-sub-topview-inner--about {
  margin-bottom: 0;
}

/*========= about 挨拶文 ===============*/
.b-ab-greeting-inner {
  /* イラストの背景 */
  height: auto;
  background-color: var(--white);
  background-image: url(./images/about/bg-bread.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 130%;

}

.b-ab-greeting-inner-txt {
  padding-bottom: 4rem;
}

.b-ab-greeting-inner__desc {
  padding-bottom: 1.5rem;
}

.b-ab-greeting-inner__desc p {
  margin-bottom: 1rem;
}


.b-ab-greeting-inner__sign {
  text-align: right;
}

/* .b-ab-greeting-shopimg {
  height: 320px;
  background-image: url(./images/about-welcome.jpg);
  background-position: center;
  background-size: 130%;

  margin-bottom: 1.5rem;
} */

/* for WP 店舗写真をパララックス風にする */
/* 注意：background-attachment iOS 使えない */
.b-ab-greeting-inner-table {
  background-color: var(--white);
  margin-top: 100vh;
  padding-bottom: 1.5rem;
}

/* .b-ab-greeting-inner-table {
  margin-bottom: 1.5rem;
} */

/* .b-ab-greeting-inner-table::before {
  content: '';
  display: block;
  width: 100%;
  height: 100vh;
  background-image: url(./images/about-welcome.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
} */
.b-ab-greeting-inner-table::before {
  content: '';
  display: block;
  width: 100%;
  /* height: 320px; */
  height: 100vh;
  background-image: url(./images/about-welcome.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* background-attachment: fixed; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

/* for WP 店舗情報の追加 */
.b-ab-titlebox-h2 {
  text-align: left;
  border-bottom: solid 1px rgb(150, 175, 163);
  /* margin-top: 1.5rem; */
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  padding-bottom: .25rem;
}

.b-ab-titlebox-h2__heading {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.25rem;
}

/* .b-ab-titlebox-h3 {
  text-align: left;
  border-bottom: solid 1px rgb(150, 175, 163);
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  padding-bottom: .25rem;
}

.b-ab-titlebox-h3__heading {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.25rem;
} */

.b-ab-greeting-inner-table__box {
  border-collapse: collapse;
  /* margin-top: 1.5rem; */
}

.b-ab-greeting-inner-table__box th {
  color: var(--white);
  font-weight: 300;
  background-color: var(--key_green);
  border: solid 1px var(--white);
  width: 30%;
  padding: 0.5rem;
}

.b-ab-greeting-inner-table__box td {
  background-color: rgba(191, 180, 134, .2);
  border: solid 1px var(--white);
  /* width: 30%; */
  padding: 0.5rem;
}

/* menu.html */
/*************************************************
  menu
*************************************************/

/*========= menu-topview背景 ===============*/
.b-sub-topview-inner--menu {
  background-image: linear-gradient(rgba(144, 144, 144, .5), rgba(144, 144, 144, .5)), url(./images/concept/colne_anypans.jpg);
}

/*========= menu パンの写真一覧 ===============*/

.b-menu-archive-inner {
  /* padding-bottom: 2rem; */
  margin-bottom: 2.5rem;
}

.b-menu-archive-inner-pic {
  margin-bottom: 3.0rem;
}


.b-menu-archive-inner-pic-parts {
  margin: 0 auto;
  text-align: center;
  /* min-height: 320px; */
  margin-bottom: 2rem;
}

.b-menu-archive-inner-pic-parts>img {
  aspect-ratio: 1.36 / 1;
}

@supports not (aspect-ratio: 1.36 / 1) {
  .b-menu-archive-inner-pic-parts>img {
    height: 240px;
  }
}


.b-menu-archive-inner-pic-parts__desc {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.25rem;
  /* font-size: clamp(1.25rem, 2vw, 1.5rem); */
  padding-top: .75rem;
  padding-bottom: .5rem;
  /* padding-bottom: .5rem; */

}

.b-menu-archive-inner-pic-parts__price {
  color: var(--red);
  font-family: 'RocknRoll One', sans-serif;
  font-size: 1.25rem;
  font-size: .825rem;
}

/* for WP desc->h4 change */
.b-menu-archive-inner-pic-parts__h4 {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.25rem;
  padding-top: .75rem;
  padding-bottom: .5rem;
  padding-left: .875rem;
  padding-right: .875rem;
}


/* information.html */
/*************************************************
  information archive
*************************************************/
.b-sub-topview-inner--info {
  background-image: linear-gradient(rgba(144, 144, 144, .5), rgba(144, 144, 144, .5)), url(./images/about-top.jpg);
}

.b-info-archive-inner {
  margin-bottom: 2.5rem;
}

/*========= 記事一覧 ===============*/
.b-info-archive-inner-post {
  /* SPでは縦に並べる */
  margin-bottom: 3rem;
}

.b-info-archive-inner-card {
  margin-bottom: 3.0rem;
}

.b-info-archive-inner-card-parts {
  margin: 0 auto;
  width: 94%;
  text-align: left;
  background-color: var(--white);
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
  /* min-height: 326px; */
  padding: .4rem;
  margin-bottom: 2rem;

  position: relative;
  z-index: 0;
}

.b-info-archive-inner-card-parts:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  /* box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.2); */
  /* box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.2); */
  transform: translateY(3px);
  transition: all .3s 0 ease;

}


.b-info-archive-inner-card-parts a {
  text-decoration: none;
}

.b-info-archive-inner-card-parts img {
  aspect-ratio: 1.36 / 1;
  height: auto;
}

@supports not (aspect-ratio: 1.36 / 1) {
  .b-info-archive-inner-card-parts img {
    height: 240px;
  }
}

.b-info-archive-inner-card-parts__h4 {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.25rem;
  /* font-size: clamp(1.25rem, 2vw, 1.5rem); */
  padding-top: .75rem;
  padding-bottom: 1.5rem;
  padding-left: .875rem;
  padding-right: .875rem;
  /* height: 5rem; */

}

.b-info-archive-inner-card-parts__date {
  color: var(--key_green);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
  text-align: right;
  padding-right: .875rem;

}

.b-info-archive-inner-card-parts__catebox {
  display: inline-block;
  padding: .2rem .4rem;

  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .625rem;
  background-color: rgba(191, 180, 134, .8);


  position: absolute;
  top: .4rem;
  left: .4rem;
  z-index: 10;

}

/* add for WP list-style */
.b-info-archive-inner-card-parts__catebox {
  list-style: none;
}

/*========= サイドバー ===============*/
.b-info-archive-inner-side-category__list,
.b-info-archive-inner-side-arc__list {
  font-size: 1rem;
  margin-bottom: 2rem;
}

.b-info-archive-inner-side-category__list a,
.b-info-archive-inner-side-arc__list a {
  text-decoration: none;
}

.b-info-archive-inner-side-category__list a:hover,
.b-info-archive-inner-side-arc__list a:hover {
  text-decoration: underline;
}

.b-info-archive-inner-side-category__list>li,
.b-info-archive-inner-side-arc__list>li {
  padding: 0 0 .875rem 1rem;
}

.b-info-archive-inner-side-category__list>li:last-child,
.b-info-archive-inner-side-arc__list>li:last-child {
  padding: 0 0 0rem 1rem;
}

/*========= サイドバー WP要素用に追加 ===============*/

.b-info-archive-inner-side h4 {
  /* .b-sub-titlebox-h4 { */
  margin: 0 auto;
  text-align: left;
  /* width: min(100%, 960px); */
  /* 親要素の幅に従う */
  width: 100%;
  padding-bottom: .25rem;
  border-bottom: dotted 2px rgb(191, 180, 134);
  margin-bottom: 1.0rem;

  /* } */

  /* .sub-titlebox-h4__heading { */
  color: var(--key_green);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 1.5rem;
  /* } */
}

.b-info-archive-inner-side ul {

  /* .b-info-archive-inner-side-category__list,
.b-info-archive-inner-side-arc__list { */
  font-size: 1rem;
  margin-bottom: 2rem;
}

.b-info-archive-inner-side ul a {
  text-decoration: none;
}

.b-info-archive-inner-side ul a:hover {
  text-decoration: underline;
}

.b-info-archive-inner-side li {
  padding: 0 0 .875rem 1rem;
}

.b-info-archive-inner-side li:last-child {
  padding: 0 0 0rem 1rem;
}

.b-info-archive-inner-side .data {
  font-size: .875rem;
  color: var(--key_green);
}

.b-info-archive-inner-side li>a {
  display: flex;
  justify-content: flex-start;
}

.b-info-archive-inner-side li>a>img {
  width: 40%;
  height: 100%;
  flex-shrink: 0;
}

.b-info-archive-inner-side li>a>p {
  font-weight: 400;
  padding-left: .5rem;
  flex-grow: 1;
}

/* Tagクラウド */
.tagcloud {
  margin-bottom: 2rem;
  padding: 0 0 .875rem 1rem;
}

.tagcloud a {
  display: inline-block;
  font-size: 1rem !important;
  text-decoration: none;
  padding-left: 1em;
  position: relative;
}

.tagcloud a:hover {
  text-decoration: underline;

}

.tagcloud a::before {
  content: '\f02b';
  font-family: "Font Awesome 5 Free";
  font-size: .875em;
  font-weight: 900;
  top: 3px;
  left: 0em;
  color: var(--key_green);
  position: absolute;
  z-index: 100;
}

/* information_single.html */
/*************************************************
  information single
*************************************************/
.b-info-single-inner {
  margin-bottom: 2.5rem;
}

/*========= 記事 ===============*/
.b-info-single-inner-main {
  margin-bottom: 3rem;
}

.b-info-single-inner-main-post {
  /* SPでは縦に並べる */
  margin-bottom: 3rem;
}

.b-info-single-inner-main-upparts {
  display: flex;
  justify-content: space-between;
  margin-bottom: .875rem;
}

.b-info-single-inner-main-upparts__catebox {
  display: inline-block;
  padding: .2rem .8rem;

  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .625rem;
  background-color: rgba(191, 180, 134, .8);
}

/* for WP list-style */
.b-info-single-inner-main-upparts__catebox li {
  list-style: none;
}

.b-info-single-inner-main-upparts__catebox a {
  text-decoration: none;
}

.b-info-single-inner-main-upparts__catebox a:hover {
  text-decoration: underline;
}

.b-info-single-inner-main-upparts__date {
  color: var(--key_green);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
  text-align: right;
  /* padding-right: .875rem; */
}

.b-info-single-inner-main-eyecatch {
  margin-bottom: 1.5rem;
}

.b-info-single-inner-main-txt {
  margin-bottom: 2.5rem;
}

/* 本文中の行間 */
.b-info-single-inner-main-txt p {
  margin-bottom: 1rem;
}

/* 関連記事 */
.b-info-single-inner-main-relat {
  margin-bottom: 3rem;
}

.b-info-single-inner-main-relat-wrap-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.b-info-single-inner-main-relat-wrap a {
  text-decoration: none;
}

.b-info-single-inner-main-relat-wrap-box__eyecatch {
  width: 30%;
  flex-shrink: 0;
}

/* 関連記事のh4 */
.b-info-single-inner-main-relat-wrap-box__heading {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .825rem;
  flex-grow: 1;
  width: 65%;
  padding-left: .5rem;

}

/* .b-info-single-inner-main-relat-wrap-box__heading {
  width: 65%;
} */


/*************************************************
  Contact SM
*************************************************/
/*========= contact 挨拶文 ===============*/
/* for WP Contact txt */
.b-cn-greeting-inner {
  /* イラストの背景 */
  height: auto;
}

.b-cn-greeting-inner-txt {
  text-align: left;
  padding-bottom: 4rem;
}

.b-cn-greeting-inner__desc {
  padding-bottom: 1.5rem;
}

.b-cn-greeting-inner__desc p {
  font-size: .875rem;
  line-height: 1.7;
  margin-bottom: .875rem;
}

/* Contact form */
.b-form-box {
  background-color: rgba(191, 180, 134, .2);
  /* border: 1px solid rgba(191, 180, 134, .2); */
  border-radius: 4px;

  /* border-bottom: dotted 2px rgb(191, 180, 134); */
  /* padding-top: 2rem;
  padding-bottom: 2rem; */
  padding: 2rem 1rem;
  margin-bottom: 1rem;
}

.b-form-box__name,
.b-form-box__email,
.b-form-box__tel,
.b-form-box__title,
.b-form-box__mes {
  /* border-bottom: dotted 2px rgb(191, 180, 134); */
  float: left;
  width: 100%;
  font-size: .875rem;
  line-height: 1.7;
  padding: 1.6rem 0 1rem 1rem;
  white-space: normal;
}

.b-form-box__name span,
.b-form-box__email span,
.b-form-box__tel span,
.b-form-box__title span,
.b-form-box__mes span {
  font-size: .5rem;
  line-height: 1;
  padding: .2rem;
  margin-right: .4rem;
}

/* 必須項目 */
.b-form-box__name span,
.b-form-box__email span,
.b-form-box__mes span {
  color: var(--white);
  background-color: var(--red);
  /* border: 1px solid var(--red); */
  border-radius: 4px;
}

/* 任意項目 */
.b-form-box__tel span,
.b-form-box__title span {
  color: var(--white);
  background-color: var(--key_green);
  /* border: 1px solid var(--key_green); */
  border-radius: 4px;
}


.b-form-box__inputspace {
  font-size: 1rem;
  line-height: 1;
  background-color: var(--white);
  /* border: 1px solid var(--white); */
  /* border: 1px solid var(--key_green); */
  border-radius: 4px;
  min-height: 5rem;
  margin-bottom: .4rem;
  padding: 20px 20px 20px 1rem;
  /* border-bottom: dotted 2px rgb(191, 180, 134); */
}

/* .b-form-box input {
  max-width: 100%;
  border: 1px solid var(--key_green);
  border-radius: 4px;
  padding: .2rem;
} */
.b-form-box input[type="text"],
.b-form-box input[type="email"],
.b-form-box textarea {
  line-height: 1.7;
  border: 1px solid var(--key_green);
  border-radius: 4px;
}


.b-form-box input[type="text"],
.b-form-box input[type="email"] {
  max-width: 100%;
}

.b-form-box textarea {
  max-width: 100%;
}

::placeholder {
  color: var(--key_green);
}

/* お問い合わせフォーム確認画面へのボタン */
.b-form-btnbox {
  text-align: center;
  /* display: flex;
  justify-content: center;
  flex-direction: row-reverse; */
}

.b-form-btn {
  display: inline-block;
  /* text-align: center; */
}

/* 確認と送信ボタン */
.b-form-btn--con {
  margin: 1rem 2rem;
}

.b-form-btn__confm {
  /* display: inline-block; */
  /* width: auto;
  min-width: 40%; */
  /* color: var(--white);
  background-color: var(--charcoal);
  border-radius: 4px; */
}

.b-form-btn__confm input {
  cursor: pointer;
  /* position: relative; */
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  line-height: 1;
  color: var(--white);
  background-color: var(--charcoal);
  border-radius: 4px;
  padding: 1rem 2rem;

}

.b-form-btn__confm input:hover {
  opacity: .7;
  /* color: var(--charcoal); */
}

/*************************************************
  Page SM for WP
*************************************************/
/* for WP Contact txt */
.b-page-greeting-inner {
  /* イラストの背景 */
  height: auto;
}

.b-page-greeting-inner-txt {
  text-align: left;
  padding-bottom: 4rem;
}

.b-page-greeting-inner__desc {
  font-size: .875rem;
  line-height: 1.7;
  padding-bottom: 1.5rem;
}

/* .b-page-greeting-inner__desc p {
  font-size: .875rem;
  line-height: 1.7;
  margin-bottom: .875rem;
} */

/*************************************************
  for WP 食パン予約ページのsubtopの指定 
*************************************************/

/*========= reserve-topview背景 ===============*/
.b-sub-topview-inner--res {
  background-image: url(./images/banner/yakitate-reserve-wood.jpg);
  height: auto;
  margin-bottom: 1.125rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: grid;
  justify-items: center;
  align-content: center;
}

/*========= reserve 予約フロー ===============*/
.b-res-flow {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4.25rem;
  position: relative;

}

.b-res-flow__heading {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  position: absolute;
  top: -3.5rem;
  left: 0;
  right: 0;
  z-index: 100;
}

.b-res-flow__num {
  display: inline-block;
  color: var(--key_green);
  font-family: 'Ubuntu', sans-serif;
  font-size: 6rem;
  line-height: 1;
  padding-right: 9px;
}

.b-res-flow__icon {
  width: 67.5px;
  height: auto;
}

.b-res-flow__desc {
  display: block;
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.25rem;
  text-align: center;
  background-color: rgba(191, 180, 134, .2);
  border-radius: 4px;
  margin: 0 auto;
  padding: 3.4375rem 0;
}

.b-res-flow__txt {
  display: inline-block;
  width: 90%;
}

/* 2 受け取り時間枠 */
.b-res-flow__timebox {
  display: inline-block;
  background-color: var(--white);
  border-radius: 4px;
  width: 80%;
  margin-top: .75rem;
  padding: .75rem .5rem;
}

.b-res-flow__time {
  display: inline-block;
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.125rem;
}

.b-res-flow__closing {
  display: inline-block;
  color: var(--red);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
}

/* 3 */
.b-res-flow__supplement {
  display: inline-block;
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  font-size: .875rem;
  width: 90%;
  margin-top: .5rem;
}

/* 4 */
.b-res-flow__underline {
  display: inline-block;
  background-image: linear-gradient(transparent 50%, var(--white) 50%);
  padding-bottom: .25rem;
}

.b-res-flow--last {
  margin-bottom: 1.25rem;
}


/*************************************************
  for WP　食パン予約フォームの装飾
*************************************************/
/* 予約するボタン */
#booking-package .bookingButton {
  display: block;
  font-weight: bold;
  font-size: 1rem;
  color: var(--white);
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--key_beige);
  border: 1px #BFB486 solid;
  border-radius: 4px;
  width: clamp(200px, 54%, 360px);
  margin: 0 auto;
  padding: 0.4rem 1.6rem;
  transition: all 0.4s ease;
}

#booking-package .bookingButton:hover {
  opacity: .7;
  color: var(--charcoal);
}

/* 戻るボタン */
#returnToSchedules.returnButton {
  display: block;
  font-weight: bold;
  font-size: 1rem;
  color: var(--white);
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--key_green);
  border: 1px #96afa3 solid;
  border-radius: 4px;
  width: clamp(200px, 54%, 360px);
  margin: 0 auto;
  padding: 0.4rem 1.6rem;
  transition: all 0.4s ease;
}

#returnToSchedules.returnButton:hover {
  opacity: .7;
  color: var(--charcoal);
}

/* 日時選択時の戻るボタン */
#returnToCalendarButton {
  color: var(--white);
  background-color: var(--key_green);
  border-radius: 4px;
  padding: 0.4rem 2rem;
}

#returnToCalendarButton:hover {
  opacity: .7;
  color: var(--charcoal);
}

/* アニメーション効果など */
/*************************************************
  fadi-in フワッと現れる効果
*************************************************/
.js-fade-in {
  opacity: 0;
  visibility: hidden;
}

/* .fade-in */
.js-fade-in.is-show {
  -webkit-animation-name: fade-in-anime;
  animation-name: fade-in-anime;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes fade-in-anime {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fade-in-anime {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

/*************************************************
  hero Sswiper zoomUp
*************************************************/
@-webkit-keyframes b-hero-zoomUp {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

@keyframes b-hero-zoomUp {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .b-hero-cover01,
.swiper-slide-duplicate-active .b-hero-cover01,
.swiper-slide-prev .b-hero-cover01 {
  -webkit-animation: b-hero-zoomUp 15s linear 0s 1 normal both;
  animation: b-hero-zoomUp 15s linear 0s 1 normal both;
}


/*
COMMON
================================================ */
/* top h2 heading */
.b-top-titlebox-h2 {
  margin: 0 auto;
  text-align: center;
  width: min(100%, 560px);
  border-bottom: solid 1px rgb(150, 175, 163);
  margin-bottom: 1.5rem;

}

.b-top-titlebox-h2__heading {
  color: var(--key_beige);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 2rem;
}

/* top MORE button */
.b-btn-box {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: clamp(200px, 54%, 360px);
}

.b-btn-box__link {
  display: block;
  padding: 0.4rem 1.6rem;
  font-weight: bold;
  font-size: 0.8rem;
  color: var(--white);
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px #BFB486 solid;
  background-color: var(--key_beige);
  border-radius: 20px;
  transition: all 0.4s ease;

  margin: 0 auto;
  text-align: center;
  width: clamp(200px, 54%, 360px);
}

.b-btn-box__link:hover {
  opacity: .7;
  color: var(--charcoal);
  /* background: #00b5ad; */
}

/* sub h1 heading */
.b-sub-titlebox-h1 {
  color: var(--white);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 2rem;
}

/* .b-sub-titlebox-h2 {
  color: var(--white);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 2rem;
} */

.b-sub-titlebox-undertxt {
  color: var(--white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .875rem;
  /* margin-bottom: 1rem; */

}

/* sub h2 heading */
.b-sub-titlebox-h2 {
  margin: 0 auto;
  text-align: left;
  width: min(100%, 960px);
  padding-bottom: .25rem;
  border-bottom: solid 1px rgb(150, 175, 163);
  margin-bottom: 1.5rem;
}

.b-sub-titlebox-h2--single {
  margin-bottom: .875rem;
}

.sub-titlebox-h2__heading {
  color: var(--key_beige);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 1.5rem;
}

.sub-titlebox-h2__heading--single {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
}

/* sub h3 heading */
.b-sub-titlebox-h3 {
  margin: 0 auto;
  text-align: left;
  width: min(100%, 960px);
  padding-bottom: .25rem;
  border-bottom: solid 1px rgb(150, 175, 163);
  margin-bottom: 1.5rem;
}

*/ .b-sub-titlebox-h3--single {
  margin-bottom: .875rem;
}

.sub-titlebox-h3__heading {
  color: var(--key_beige);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.5rem;
}

.sub-titlebox-h3__heading--single {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
}


/* sub for side h4 heading */

.b-sub-titlebox-h4 {
  margin: 0 auto;
  text-align: left;
  /* width: min(100%, 960px); */
  /* 親要素の幅に従う */
  width: 100%;
  padding-bottom: .25rem;
  border-bottom: dotted 2px rgb(191, 180, 134);
  margin-bottom: 1.0rem;

}

.sub-titlebox-h4__heading {
  color: var(--key_green);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 1.5rem;
}

/* for WP h2 */
.b-page-titlebox-h2 {
  color: var(--grey);
  /* font-family: 'Ubuntu', sans-serif; */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 1.25rem;
  text-align: left;
  /* border-bottom: solid 1px rgb(150, 175, 163); */
  width: min(100%, 960px);

  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.2em;

  /* margin-bottom: 1.5rem; */
  position: relative;

}

.b-page-titlebox-h2::before {
  content: '\f00c';
  font-family: "Font Awesome 5 Free";
  font-size: .875em;
  font-weight: 900;
  top: 2px;
  left: 0;
  color: var(--key_green);
  position: absolute;
  z-index: 100;

}

/* for WP　reserve sub h3 heading */
.b-res-titlebox-h3 {
  text-align: center;
  background-color: var(--key_green);
  border-radius: 4px;
  width: min(100%, 960px);
  margin: 0 auto;
  /* margin-bottom: 1.25rem; */
  padding: .75rem 0;
  /* border-bottom: solid 1px rgb(150, 175, 163); */
}

.res-titlebox-h3__heading {
  font-family: 'Noto Sans JP', sans-serif;
  /* font-family: 'Ubuntu', sans-serif; */
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 2rem; */
  font-size: 1.5rem;
  color: var(--white);
}

/*************************************************
 for WP single edit style 
 post h1-h6
 h1:same b-sub-titlebox-h2
*************************************************/
/* toukou h1-h6 */
.b-post-body {
  margin: 0 auto;
  text-align: left;
  width: min(100%, 960px);
  padding-bottom: .25rem;
  border-bottom: solid 1px rgb(150, 175, 163);
  margin-bottom: 1.5rem;
}

.b-info-single-inner-main-txt h1,
.b-page-inner-main-txt h1 {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.5rem;
  text-align: left;
  width: min(100%, 960px);
  margin: 0 auto;
  padding-bottom: .25rem;
  border-bottom: solid 1px rgb(150, 175, 163);
  margin-bottom: 1.5rem;
}

.b-info-single-inner-main-txt h2,
.b-page-inner-main-txt h2 {
  font-size: 1.5rem;
  background: rgba(191, 180, 134, .2);
  box-shadow: 0px 0px 0px 5px rgba(191, 180, 134, .2);
  border: dashed 2px var(--key_green);
  margin: 0.2em;
  padding: 0.2em;
  margin-bottom: 1rem;
}

.b-info-single-inner-main-txt h3,
.b-page-inner-main-txt h3 {
  font-size: 1.25rem;
  border-bottom: dotted 4px var(--key_beige);
  /* margin: 0.5em; */
  margin-bottom: 1rem;
}

.b-info-single-inner-main-txt h4,
.b-page-inner-main-txt h4 {
  font-size: 1.15rem;
  background: rgba(191, 180, 134, .2);
  border-bottom: solid 4px var(--key_beige);
  /* margin: 0.5em; */
  margin-bottom: 1rem;
  padding: 0.2em;

}

.b-info-single-inner-main-txt h5,
.b-page-inner-main-txt h5 {
  font-size: 1rem;
  border-bottom: double 5px var(--key_green);

  margin-bottom: 1rem;
  padding: 0.2em;

}

.b-info-single-inner-main-txt h6,
.b-page-inner-main-txt h6 {
  font-size: 1rem;
  background: rgba(150, 175, 163, .2);

  margin-bottom: 1rem;
  padding: 0.2em;
}

.b-page-inner-main-txt p {
  margin-bottom: 2rem;
}

.b-info-single-inner-main-txt ul,
.b-page-inner-main-txt ul {
  list-style: none;
  margin-left: 1.2rem;
  margin-bottom: 2rem;
}

.b-info-single-inner-main-txt li,
.b-page-inner-main-txt li {
  padding-left: 1.2em;
  margin-bottom: 0.5rem;
  position: relative;
}

.b-info-single-inner-main-txt li::before,
.b-page-inner-main-txt li::before {
  content: '\f00c';
  font-family: "Font Awesome 5 Free";
  font-size: .875em;
  font-weight: 900;
  top: 2px;
  left: 0;
  color: var(--key_green);
  position: absolute;
  z-index: 100;
}

.b-info-single-inner-main-txt table {}

/* .b-post-body--single {
  margin-bottom: .875rem;
} */

/* .sub-titlebox-h3__heading {
  color: var(--key_beige);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.5rem;
}

.sub-titlebox-h3__heading--single {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
} */

/* Tag */
.b-sub-tag {
  font-size: .876rem;
  padding: 1rem 0;
}

.b-sub-tag a {
  display: inline-block;
  text-decoration: none;
  padding-left: 2em;
  position: relative;
}

.b-sub-tag a:hover {
  text-decoration: underline;
}

.b-sub-tag a::before {
  content: '\f02b';
  font-family: "Font Awesome 5 Free";
  font-size: .875em;
  font-weight: 900;
  top: 2px;
  left: 1em;
  color: var(--key_green);
  position: absolute;
  z-index: 100;
}

/*************************************************
 for WP 404 page size:Small
*************************************************/
/*========= 404-topview背景 ===============*/
.b-sub-topview-inner--ntf {
  background-image: linear-gradient(rgba(144, 144, 144, .7), rgba(144, 144, 144, .7)), url(./images/about-welcome.jpg);
}

.b-ntf-inner-txt {
  text-align: left;
  /* padding-bottom: 4rem; */
}

/* for WP 404page sub h3 heading */
.b-ntf-titlebox-h2 {
  text-align: center;
  /* background-color: var(--key_green); */
  /* border-radius: 4px; */
  border-bottom: dotted 2px var(--key_green);
  width: min(100%, 960px);
  margin: 0 auto;
  margin-bottom: 1.25rem;
  padding: .75rem 0;
  /* border-bottom: solid 1px rgb(150, 175, 163); */
}

.ntf-titlebox-h2__heading {
  color: var(--grey);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: 1.25rem;
}

.b-ntf-reason-box {
  display: flex;
  /* justify-content: center; */
  justify-content: flex-start;
  margin-bottom: 2.5rem;
}

.b-ntf-reason {
  text-align: left;
  position: relative;
  padding: 0.5rem 0 0.5rem 3em;
}

.b-ntf-reason__list {
  line-height: 2;
  list-style-type: none;
  padding: 0.5rem 0px;
}

.b-ntf-reason__list::before {
  color: var(--key_green);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1em;
  content: '\f00c';
  position: absolute;
  left: 1em;
}

/* for Search Result List */
.b-ntf-search__list {
  line-height: 2;
  list-style-type: none;
  padding: 0.5rem 0px;
}

.b-ntf-search__list::before {
  color: var(--key_green);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1em;
  content: '\f249';
  position: absolute;
  left: 1em;
}

.b-ntf-backcolor {
  background-color: var(--white);
}

/* 検索とリンクボタン */
.b-ntf-contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 1.5rem;
}

.b-ntf-box-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  background-image: linear-gradient(rgba(144, 144, 144, .8), rgba(144, 144, 144, .5)), url(./images/concept/colne_anypans.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  margin: 0 auto;
  height: 320px;
  padding: .75rem 0;
}

.b-ntf-box-link__button {
  display: inline-block;
  color: var(--white);
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  text-decoration: none;
  border: solid 1px var(--white);
  border-radius: 4px;
  width: 80%;
  padding: 1rem;
  transition: all .4s ease;

}

.b-ntf-box-link__button:hover {
  color: var(--charcoal);
  background-color: var(--white);
  opacity: .7;
}

.b-ntf-search {
  display: block;
  text-align: center;
  background-color: rgba(191, 180, 134, .2);
  width: 100%;
  height: auto;
}

.b-ntf-search__tbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: var(--white);
  background-color: var(--key_green);
  font-size: 1.25rem;
  padding: 0 1rem;
}

.b-ntf-search__title {
  display: inline-block;
  /* color: var(--white);
  background-color: var(--key_green); */
  font-size: 1.25rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* margin: 0 auto; */
  padding: 1rem 1rem 1rem .5rem;
}

/* .b-ntf-search__title::before {
  color: var(--white);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1em;
  content: '\f002';
  position: absolute;
  top: 0;
  left: 1em;
} */


.b-ntf-search__box {
  text-align: left;
  margin: 0 auto;
  padding: 1rem 2rem 3rem 2rem;
}

.b-ntf-search__desc {
  margin-bottom: 1.25rem;
}

/* 検索フォーム */
.b-search-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: var(--white);
  width: 100%;
  margin: 0 auto;
  /* padding: 0.5rem; */
}

.b-search-form__input {
  font-size: 1rem;
  width: 80%;
  padding: 0.5rem;
}

.b-search-form__btn {
  display: inline;
  text-align: center;
  color: var(--white);
  background-color: var(--key_green);
  width: 20%;
  padding: 0.5rem;
}

.b-search-form__btn:hover {
  /* background-color: var(--white); */
  opacity: .7;
  transition: all .4s ease;


}

/* single page下のSNS シェアボタン */

.sub-sns-share-list {
  color: var(--white);
  font-size: 1.25rem;
  /* line-height: 1.25rem; */

  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 8px;
}

.sub-sns-share-list a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.sub-sns-share-list__twitter,
.sub-sns-share-list__facebook,
.sub-sns-share-list__hatena,
.sub-sns-share-list__pin {
  border-radius: 3px;
  padding-top: .25rem;
  padding-bottom: .25rem;

}

.sub-sns-share-list__twitter {
  background-color: #55ACEE;
}

.sub-sns-share-list__facebook {
  background-color: #315096;
}


.sub-sns-share-list__hatena {
  /* color: var(--white); */
  background-color: #008FDE;

  font-family: 'Verdana', sans-serif;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: .100rem;
  /* font-size: 1.25rem; */
}


.sub-sns-share-list__line {

  /* color: #00C300; */
  background-color: #00C300;
  border-radius: 3px;
  padding-top: .05rem;
  padding-bottom: .05rem;
}

.b-sub-sns-share .fa-line {
  font-size: 2.0rem;
  line-height: 1.25;
  color: #00C300;
  position: relative;
  z-index: 100;
}

.b-sub-sns-share .fa-line::after {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background-color: var(--white);
  position: absolute;
  z-index: -10;
  top: 7px;
  left: 1px;
}

.sub-sns-share-list__pin {
  background-color: #BD081C;
}

/* ホバー */
.b-sub-sns-share li:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}


/* ページネーション　アーカイブページ用 */

/* For WPページネーション/ページャー
-----------------------------------------------------------*/

/* .pagination {
	clear: both;
	position: relative;
	font-size: 87.5%;
	line-height: 1.2;
}

.pagination span,
.pagination a {
	width: auto;
	margin-right: 4px;
	padding: 6px 8px 5px 8px;
	border-radius: 4px;
}

.pagination a {
	display: inline-block;
	border: 1px solid #CCC;
	text-decoration: none;
}

.pagination a:hover {
	color: #fff;
	background: #EEE;
}

.pagination span {
	display: none;
}

.pagination .current {
	display: inline-block;
	padding: 6px 8px 5px 8px;
	border: 1px solid #EEE;
	background: #EEE;
} */

.nav-links .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  /* height: 35px; */

  /* color: var(--white); */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .75rem;
}

.nav-links .page-numbers a,
.nav-links .page-numbers span {
  display: block;
  /* padding: 0 20px; */
  height: 35px;
  /* テキストを縦方向中央にするために、line-heightを親要素の高さと同じにする */
  line-height: 35px;
  transition: all .4s ease;
  width: min(30px, calc(100vw * 70/375));
  background-color: var(--litgrey);
  text-decoration: none;

}

/* current */
.nav-links .page-numbers .current {
  background-color: var(--key_green);
  color: var(--white);
}

/* prev & next */
.nav-links .page-numbers .prev,
.nav-links .page-numbers .next {
  width: min(70px, calc(100vw * 70/375));
}

/* prev */
.nav-links .page-numbers .prev {
  border-radius: 20px 0 0 20px;
}

/* next */
.nav-links .page-numbers .next {
  border-radius: 0 20px 20px 0;
}

.nav-links .page-numbers .prev:hover,
.nav-links .page-numbers .next:hover,
.nav-links .page-numbers a:hover,
.nav-links .page-numbers span:hover {
  background-color: var(--key_beige);
  color: var(--white);
  text-decoration: underline;
}



/* b-sub-pagenation */
.b-sub-pagenation {
  /* display: inline-block; */
  /* height: 35px; */
  /* テキストを縦方向中央にするために、line-heightを親要素の高さと同じにする */
  /* line-height: 35px; */
  /* border-radius: 20px; */
  /* background-color: var(--litgrey); */

}

.b-sub-pagenation-list {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  /* height: 35px; */

  /* color: var(--white); */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .75rem;
}

.b-sub-pagenation-list__prev,
.b-sub-pagenation-list__next,
.b-sub-pagenation-list__current,
.b-sub-pagenation-list__other {
  display: block;
  /* padding: 0 20px; */
  height: 35px;
  /* テキストを縦方向中央にするために、line-heightを親要素の高さと同じにする */
  line-height: 35px;
  transition: all .4s ease;
}

.b-sub-pagenation-list__prev,
.b-sub-pagenation-list__next {
  /* width: 70px; */
  width: min(70px, calc(100vw * 70/375));

}

.b-sub-pagenation-list__current,
.b-sub-pagenation-list__other {
  /* width: 30px; */
  width: min(30px, calc(100vw * 30/375));

}

.b-sub-pagenation-list__prev {
  border-radius: 20px 0 0 20px;
}

.b-sub-pagenation-list__next {
  border-radius: 0 20px 20px 0;
}


.b-sub-pagenation-list__other,
.b-sub-pagenation-list__prev,
.b-sub-pagenation-list__next {
  background-color: var(--litgrey);
  text-decoration: none;
}

.b-sub-pagenation-list__prev--single {
  margin-right: 5px;
}

.b-sub-pagenation-list__other:hover,
/* .b-sub-pagenation-list__prev:hover, */
.b-sub-pagenation-list__next:hover,
.b-sub-pagenation-list__prev--single:hover {
  background-color: var(--key_beige);
  color: var(--white);
  text-decoration: underline;
}

.b-sub-pagenation-list__current {
  background-color: var(--key_green);
  color: var(--white);
}

.b-sub-pagenation-list li:nth-child(8),
.b-sub-pagenation-list li:nth-child(9) {
  display: none;
}

/* ページ送り　singleページ用 */
/* .b-sub-pagenation-single {} */


/* breadcrumb html */
.breadcrumb--about {
  background-color: var(--white);
  padding-top: 1.125rem;
}

.b-breadcrumb {
  list-style: none;
  margin-bottom: 1.125rem;

}

.b-breadcrumb li {
  display: inline;
  list-style: none;

  color: var(--key_green);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .675rem;
}

.b-breadcrumb li::after {
  /* content: '>'; */
  content: '\f105';
  font-family: "Font Awesome 5 Free";
  font-size: .875em;
  font-weight: 900;
  padding: 0 0.4em;
  color: var(--key_green);
}

.b-breadcrumb li:last-child::after {
  content: '';
}

.b-breadcrumb li a {
  text-decoration: none;
}

.b-breadcrumb li a:hover {
  text-decoration: underline;
}

/* breadcrumb for WP plug-in */
.b-breadcrumb {
  margin-bottom: 1.125rem;
}

.b-breadcrumb_inner {
  color: var(--key_green);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .100rem;
  font-size: .675rem;
}

.b-breadcrumb_inner a {
  text-decoration: none;
}

.b-breadcrumb_inner a:hover {
  text-decoration: underline;
}

.b-breadcrumb_inner span {
  padding-right: 0.2em;
}

.b-breadcrumb i::after {
  content: '';
  padding: 0 0.2em;
  /* color: var(--key_green); */
}

/* footer注意書き */
.b-footer-notice {
  display: inline-block;
  color: var(--red);
  /* background-color: rgba(255, 255, 255, .2); */
  /* background-color: rgba(191, 180, 134, .2); */
  border-top: 1px dotted var(--charcoal);
  border-bottom: 1px dotted var(--charcoal);
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 0.7rem;
}

/* Na2 PC START*/

/* PCとモバイルで表示を分けたい用 */

/* .pc {
    display: none!important;
}

.mb {
    display: block!important;
} */

/*
TABLET SIZE 768px～
================================================ */

@media (min-width:768px) {

  /* body font-size 1rem */
  body {
    font-size: 1rem;
  }

  /*************************************************
    hero
  *************************************************/
  .b-hero-inner {
    height: 55vh;
    margin-bottom: 2.5rem;
  }

  .b-hero-cover01-bg__txt,
  .b-hero-cover02-bg__txt,
  .b-hero-cover03-bg__txt {
    font-size: 1.5rem;
  }

  /*************************************************
    焼きたてbanner
  *************************************************/
  .b-banner-inner {
    /* 余白 */
    /* margin-bottom: 2.5rem; */
    padding-bottom: 2.5rem;
  }

  /*************************************************
    welcome txt
  *************************************************/
  .b-welcom-inner {
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
  }

  /*************************************************
    information
  *************************************************/
  .b-info-inner {
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
  }

  /*************************************************
    concept
  *************************************************/
  .concept-imgset-wrapper {
    max-width: 460px;
    /* padding-left:60px; */
    /* padding-right:60px; */
    /* width: min(87.5%, 960px); */
    /* overflow: hidden; */
  }


  .b-concept-top-inner {
    /* padding-bottom: 1rem; */
    margin-bottom: 2.5rem;
  }

  /* conceptの画像部分 ここから*/
  .b-concept-img-inner {
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
  }

  .b-concept-img-inner-set {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* min-height: 300px; */
    /* height: 30vh; */
  }

  .b-concept-img-inner-set-picture {
    min-height: 320px;
    width: 50%;

  }

  .b-concept-img-inner-set-txt {
    min-height: 320px;
    width: 50%;
  }

  .b-concept-img-inner-set--rev {
    flex-direction: row-reverse;
  }

  .b-concept-img-inner-set-txt__heading {
    /* font-size: 2rem; */
    font-size: 1.25rem;
    text-align: left;
    padding-top: 5rem;
    /* padding-left: 2rem; */
    margin-bottom: 1.5rem;
    /* padding-left: 60px; */
  }

  .b-concept-img-inner-set-txt__desp {
    /* font-size: 2rem; */
    font-size: 0.875rem;
    text-align: left;
    /* 文字数の最小幅の指定 */
    min-width: 17em;
    /* padding-left: 2rem; */
    /* padding-left: 60px; */

  }

  /* タブレット、PCの横並びで右側テキストエリアの調整用 */
  .b-concept-img-inner-set-txt__heading--right {
    padding-right: 60px;

  }

  /*************************************************
    pickup
  *************************************************/
  .b-pickup-top-inner {
    /* padding-bottom: 1rem; */
    /* margin-bottom: 1.5rem; */
  }

  .b-pickup-swiper {
    width: 63.75%;
  }

  /* for WP */
  .b-pickup-noswiper {
    width: 63.75%;
  }

  .b-pickup-slide-area>img {
    /* max-width: 560px; */
    /* width: 100%; */
  }

  /*************************************************
    shopmap
  *************************************************/
  .b-shopmap-inner {
    max-width: 960px;
    /* max-height: 360px; */
    width: 100%;
    aspect-ratio: 2.6/1;
    margin-bottom: 2.5rem;
  }

  @supports not (aspect-ratio: 2.6/1) {
    .b-shopmap-inner {
      height: 360px;
    }
  }

  /* For WP aboutページの下部のパララックスデザイン的にあるとよい */
  /* 他のページにはmargin-topいらない */
  .b-shopmap-inner--about {
    margin-top: 2.5rem;
  }

  /*************************************************
    About tablet
  *************************************************/
  /*========= sub-topview背景 ===============*/
  .b-sub-topview-inner {
    height: 364px;
  }

  /*========= about 挨拶文 ===============*/
  .b-ab-greeting-inner {
    /* イラストの背景 */
    /* height: 600px; */
    /* background-image: url(./images/about/bg-bread.jpg); */
    /* background-position: bottom; */
    /* background-position: center; */
    background-size: cover;

  }

  .b-ab-greeting-inner-txt {
    text-align: center;
    padding-bottom: 4rem;
  }


  /*************************************************
  Contact Tablet-L
*************************************************/
  /*========= contact 挨拶文 ===============*/
  /* for WP Contact txt */

  .b-cn-greeting-inner__desc p {
    font-size: 1rem;
  }

  /* Contact form */
  .b-form-box {
    background-color: rgba(191, 180, 134, .2);
    /* border: 1px solid rgba(191, 180, 134, .2); */
    border-radius: 4px;

    /* border-bottom: dotted 2px rgb(191, 180, 134); */
    /* padding-top: 2rem;
  padding-bottom: 2rem; */
    padding: 2rem;
  }

  .b-form-box__name,
  .b-form-box__email,
  .b-form-box__tel,
  .b-form-box__title,
  .b-form-box__mes {
    /* border-bottom: dotted 2px rgb(191, 180, 134); */
    float: left;
    /* width: 16em; */
    width: 100%;
    /* font-size: .875rem; */
    line-height: 1;
    padding: 1.6rem 0 1rem 1rem;
    white-space: nowrap;
  }

  .b-form-box__name span,
  .b-form-box__email span,
  .b-form-box__tel span,
  .b-form-box__title span,
  .b-form-box__mes span {
    font-size: .5rem;
    line-height: 1;
    padding: .2rem;
    margin-right: .4rem;
  }

  /* 必須項目 */
  .b-form-box__name span,
  .b-form-box__email span,
  .b-form-box__mes span {
    color: var(--white);
    background-color: var(--red);
    /* border: 1px solid var(--red); */
    border-radius: 4px;
  }

  /* 任意項目 */
  .b-form-box__tel span,
  .b-form-box__title span {
    color: var(--white);
    background-color: var(--key_green);
    /* border: 1px solid var(--key_green); */
    border-radius: 4px;
  }


  .b-form-box__inputspace {
    min-height: 5rem;
    background-color: var(--white);
    /* border: 1px solid var(--white); */
    /* border: 1px solid var(--key_green); */
    border-radius: 4px;

    padding: 20px 20px 20px 1rem;
    margin-bottom: .4rem;
    /* border-bottom: dotted 2px rgb(191, 180, 134); */
  }

  /* .b-form-box input {
  max-width: 100%;
  border: 1px solid var(--key_green);
  border-radius: 4px;
  padding: .2rem;
} */
  .b-form-box input[type="text"],
  .b-form-box input[type="email"],
  .b-form-box textarea {
    border: 1px solid var(--key_green);
    border-radius: 4px;
  }


  .b-form-box input[type="text"],
  .b-form-box input[type="email"] {
    max-width: 100%;
  }

  .b-form-box textarea {
    max-width: 100%;
  }

  /* お問い合わせフォーム確認画面へのボタン */
  /* .b-form-btn{
  text-align: center;
  margin: 1rem 0;
}
.b-form-btn__confm{
  display: inline-block;
  width: auto;
  min-width: 30%;
  color: var(--white);
  background-color: var(--charcoal);
  border-radius: 4px;
} */

  .b-form-btn__confm input {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 1rem;
    line-height: 1;
    padding: 1rem 6rem;

  }



  .b-ab-greeting-inner__desc {
    font-size: 1rem;
    padding-bottom: 2.5rem;
  }


  .b-ab-greeting-inner__sign {
    font-size: 1rem;
    text-align: center;
  }

  /* .b-ab-greeting-shopimg {
    height: 480px;
    background-size: cover;
    margin-bottom: 2.5rem;
  } */
  /* for WP 店舗写真をパララックス風にする */
  /* Tablet */
  .about-table-wrapper {
    /* margin: 0 auto; */
    width: min(87.5%, 960px);
    /* overflow: hidden; */
  }

  /* .b-ab-greeting-inner-table::before {
    content: '';
    display: block;
    width: 100%;
    height: 480px;
    background-image: url(./images/about-welcome.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  } */

  .b-ab-greeting-inner-table {
    padding-bottom: 2.5rem;
  }

  /* .b-ab-greeting-inner-table__box {
    margin-top: 2.5rem;
  } */

  .b-ab-greeting-inner-table__box td,
  .b-ab-greeting-inner-table__box th {
    padding: 1rem 2rem;
  }

  /*************************************************
  Page Tablet-Large for WP
*************************************************/
  /* for WP Contact txt */
  .b-page-greeting-inner {
    /* イラストの背景 */
    height: auto;
  }

  .b-page-greeting-inner-txt {
    text-align: left;
    padding-bottom: 4rem;
  }

  .b-page-greeting-inner__desc {
    font-size: 1rem;
    line-height: 1.7;
    padding-bottom: 1.5rem;
  }

  /*************************************************
    Menu tablet
  *************************************************/
  /*========= menu パンの写真一覧 ===============*/
  .b-menu-archive-inner {
    margin-bottom: 5rem;
  }

  .b-menu-archive-inner-pic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(3, 1fr); for WP*/
    grid-template-rows: repeat(1, 1fr);
    column-gap: calc(100% * 40/960);
    row-gap: 1.25rem;
    margin-bottom: 5.0rem;
  }

  .b-menu-archive-inner-pic-parts {
    margin: 0 auto;
    text-align: justify;
    max-height: 390px;
    /* margin-bottom: 1.25rem; */
    margin-bottom: 0rem;
    position: relative;
    z-index: 0;
  }

  .b-menu-archive-inner-pic-parts>img {
    aspect-ratio: 1.4375 / 1;
    height: auto;
  }

  @supports not (aspect-ratio: 1.4375 / 1) {
    .b-menu-archive-inner-pic-parts>img {
      height: 320px;
    }
  }

  .b-menu-archive-inner-pic-parts__desc {
    display: inline-block;
    text-align: left;
    width: 320px;
    width: calc(100% * 0.8);
    font-size: 1rem;
    /* width: calc(100% * 0.6); */
  }

  .b-menu-archive-inner-pic-parts__price {
    display: inline-block;
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: 0;
    z-index: 10;
  }

  /*************************************************
    Information tablet
  *************************************************/
  .b-info-archive-inner {
    /* display: flex; */
  }

  /*========= 記事一覧 ===============*/
  /* タブレットでは横に並べる */
  .b-info-archive-inner-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(3, 1fr); */
    grid-template-rows: repeat(1, 1fr);
    column-gap: calc(100% * 40/960);
    row-gap: 1.25rem;

    /* margin-bottom: 3rem; */
  }

  .b-info-archive-inner-card-parts {
    margin-bottom: 0px;
  }

  .b-info-archive-inner-card-parts__date {
    position: absolute;
    bottom: 0;
    right: 10px;
    z-index: 10;
  }

  /*========= サイドバー ===============*/
  /* タブレットでは横に並べる */
  .b-info-archive-inner-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(100% * 40/960);

  }

  /*************************************************
    Information Single tablet
  *************************************************/
  .b-info-single-inner-main {
    margin-bottom: 5rem;
  }

  .b-info-single-inner-main-txt {
    font-size: 1rem;
    /* margin-bottom: 2.5rem; */
  }

  /* アイキャッチのサイズ　Max700px タブレットの範囲で幅が短いケースでは拡大して対応 */
  .b-info-single-inner-main-eyecatch img {
    width: 100vw;
  }

  /* 関連記事 */
  .b-info-single-inner-main-relat {
    margin-bottom: 3rem;
  }

  .b-info-single-inner-main-relat-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* 関連記事の横並びの幅 */
  .b-info-single-inner-main-relat-wrap-article {
    width: 48%;
  }

  /* .b-info-single-inner-main-relat-wrap-box {
    width: 96%;
  } */

  .b-info-single-inner-main-relat-wrap-box__eyecatch {
    width: 48%;
  }

  .b-info-single-inner-main-relat-wrap-box__heading {
    font-size: 1rem;
    width: 46%;
  }

  /*************************************************
  for WP 404 page size:M,L
  *************************************************/
  /* 検索とリンクボタン */
  .b-ntf-contents {
    flex-direction: row;
    padding-bottom: 2.5rem;
  }

  .b-ntf-box-link {
    width: 50%;
  }

  .b-ntf-search {
    width: 50%;
    height: 320px;
  }

  /*
    COMMON Tablet
  ================================================ */
  /* for WP pagenation  */
  .nav-links .page-numbers {
    font-size: 1rem;
    justify-content: flex-start;
  }

  /* prev & next */
  .nav-links .page-numbers a,
  .nav-links .page-numbers span {
    height: 50px;
    /* テキストを縦方向中央にするために、line-heightを親要素の高さと同じにする */
    line-height: 50px;
    width: min(42.85px, calc(100vw * 30/375));
  }

  .nav-links .page-numbers .prev,
  .nav-links .page-numbers .next {
    width: min(100px, calc(100vw * 70/375));
  }

  /* prev */
  .nav-links .page-numbers .prev {
    border-radius: calc(50px * (20/35)) 0 0 calc(50px * (20/35));
  }

  /* next */
  .nav-links .page-numbers .next {
    border-radius: 0 calc(50px * (20/35)) calc(50px * (20/35)) 0;
  }


  /* b-sub-pagenation */

  .b-sub-pagenation-list {
    font-size: 1rem;
    justify-content: flex-start;

  }

  .b-sub-pagenation-list__prev,
  .b-sub-pagenation-list__next,
  .b-sub-pagenation-list__current,
  .b-sub-pagenation-list__other {
    display: block;
    /* padding: 0 20px; */
    height: 50px;
    /* テキストを縦方向中央にするために、line-heightを親要素の高さと同じにする */
    line-height: 50px;
    transition: all .4s ease;
  }

  .b-sub-pagenation-list__prev,
  .b-sub-pagenation-list__next {
    /* width: 70px; */
    width: min(100px, calc(100vw * 70/375));
  }

  .b-sub-pagenation-list__current,
  .b-sub-pagenation-list__other {
    /* width: 30px; */
    width: min(42.85px, calc(100vw * 30/375));
  }

  .b-sub-pagenation-list__prev {
    border-radius: calc(50px * (20/35)) 0 0 calc(50px * (20/35));
  }

  .b-sub-pagenation-list__next {
    border-radius: 0 calc(50px * (20/35)) calc(50px * (20/35)) 0;
  }

  .b-sub-pagenation-list li:nth-child(8),
  .b-sub-pagenation-list li:nth-child(9) {
    display: block;
  }

  /* ページネーションをmain中央に */
  .b-sub-pagenation-list--single {
    justify-content: center;

  }

  /* breadcrumb */
  .b-breadcrumb {
    margin-bottom: 2.5rem;
  }

  .b-breadcrumb li {
    font-size: .875rem;

  }

  .b-breadcrumb_inner {
    /* color: var(--key_green);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: .100rem; */
    font-size: .875rem;
  }


}

/*
DESKTOP SIZE 1200px～
================================================ */

@media (min-width:1200px) {

  .b-gnavi-list__menu {
    font-size: 2rem;
  }

  .b-gnavi-list__menu--jp {
    font-size: 1.5rem;
  }

  /*************************************************
    hero
  *************************************************/

  .b-hero-inner {
    height: 728px;
    /* margin-bottom: 1.5rem; */
  }

  /*========= 1枚目 ===============*/
  .b-hero-cover01 {
    /* height: 100%;
    background-image: url(./images/top-syokupan.jpg);
    background-position: center;
    background-size: cover; */
    display: grid;
    grid-template-rows: auto 260px auto;
    grid-template-columns: auto 320px 320px 320px auto;
    justify-items: center;
    /* align-content: center; */
    align-items: center;
    position: relative;
    z-index: -1000;
  }

  /* キャッチコピーの背景の白いぼかしの円 */
  .b-hero-cover01-bg {
    width: 260px;
    grid-row: 2/3;
    grid-column: 2/3;
    /* position: relative;
    z-index: -500; */
  }

  @supports not (aspect-ratio: 1/1) {
    .b-hero-cover01-bg {
      width: 260px;
      height: 260px;
    }
  }

  /* span */
  .b-hero-cover01-bg__txt {
    width: 260px;
    font-size: 1.7rem;
    grid-row: 2/3;
    grid-column: 2/3;

  }

  /*========= 2枚目 ===============*/
  .b-hero-cover01-bg--img02 {
    grid-column: 4/5;
  }

  .b-hero-cover02-bg__txt {
    width: 260px;
    font-size: 1.7rem;
    grid-row: 2/3;
    grid-column: 4/5;
  }

  /*========= 3枚目 ===============*/
  .b-hero-cover03-bg {
    /* width: min(60%, 560px);
  position: relative;
  z-index: -500; */
    padding-bottom: .5rem;
    /* color: var(--white); */
    grid-row: 1/2;
    grid-column: 2/5;
  }


  .b-hero-cover03-bg__txt {
    font-size: 2rem;
    grid-row: 2/3;
    grid-column: 2/5;
    position: absolute;
    z-index: 1000;
    left: 50;
    top: 0;
    /* transform: translateY(-50%); */

  }


  .b-welcom-txt {
    font-size: 1rem;
  }

  /*************************************************
    information
  *************************************************/
  .b-info-inner-list {
    margin: 0 auto;
    text-align: center;
    padding-bottom: 1rem;
    /* margin-bottom: 1.5rem; for WP*/
  }

  .b-info-inner-list-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto;
    border-bottom: dashed 1px rgb(112, 112, 112);
  }

  .b-info-inner-list__date {
    font-size: 1rem;
    text-align: right;
    width: 30%;
    padding-bottom: 1rem;
    padding-top: 1rem;

    /* margin-bottom: 1.5rem; */

  }

  .b-info-inner-list__txt {
    font-size: 1rem;
    margin: 0;
    text-align: left;
    width: 70%;
    /* width: min(100%, 560px); */
    border-bottom: none;
    padding-left: 20px;
    padding-bottom: 1rem;
    padding-top: 1rem;
    /* margin-bottom: 1.5rem; */
  }

  /*************************************************
    concept
  *************************************************/

  .concept-imgset-wrapper {
    max-width: 480px;
    /* padding-left:60px; */
    /* padding-right:60px; */
    /* width: min(87.5%, 960px); */
    /* overflow: hidden; */
  }

  /* ブロック要素を左に寄せる */
  .concept-imgset-wrapper-left {
    margin: 0 auto 0 0;
  }

  /* ブロック要素を右に寄せる */
  .concept-imgset-wrapper-right {
    margin: 0 0 0 auto;
  }



  .b-concept-top-inner {
    /* padding-bottom: 1rem; */
    margin-bottom: 2.5rem;
  }

  .b-concept-top-inner-txt {
    font-size: 1rem;
  }



  /* conceptの画像部分 ここから*/
  .b-concept-img-inner {
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
  }

  .b-concept-img-inner-set {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* min-height: 400px; */
    height: clamp(400px, 40vh, 600px);
  }

  .b-concept-img-inner-set--rev {
    flex-direction: row-reverse;
  }

  .b-concept-img-inner-set-txt__heading {
    /* font-size: 2rem; */
    font-size: 1.25rem;
    text-align: left;
    padding-top: 6rem;
    /* padding-left: 2rem; */
    margin-bottom: 2rem;
    /* padding-left: 60px; */
    padding-left: 100px;
    /* margin-left: 0px; */
  }

  .b-concept-img-inner-set-txt__desp {
    /* font-size: 0.875rem; */
    font-size: 1rem;
    text-align: left;
    /* 文字数の最小幅の指定 */
    min-width: 20em;
    padding-left: 100px;
    /* margin-left: 0px; */

  }

  /* タブレット、PCの横並びで右側テキストエリアの調整用 */
  .b-concept-img-inner-set-txt__heading--right {
    padding-left: 0px;
    padding-right: 100px;
  }

  .b-concept-img-inner-set-txt__desp--right {
    padding-left: 0px;
    padding-right: 100px;
  }


  /*************************************************
    pickup PC
  *************************************************/

  .b-pickup-swiper {
    width: 46%;
    margin-bottom: 5.0rem;
  }

  /* for WP */
  .b-pickup-noswiper {
    width: 46%;
    margin-bottom: 5.0rem;
  }

  .b-pickup-slide-area>img {
    max-width: 100%;
  }


  .b-pickup-slide-area__desc {
    display: inline-block;
    padding-right: 2rem;
  }

  .b-pickup-slide-area__price {
    display: inline-block;
    font-size: 1.0rem;

    padding-top: .5rem;
    /* padding-bottom: .5rem; */
  }

  /* swiper paginationの位置を調整 */
  .b-pickup-swiper .swiper-horizontal>.swiper-pagination-bullets,
  .b-pickup-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
  .b-pickup-swiper .swiper-pagination-custom,
  .b-pickup-swiper .swiper-pagination-fraction {
    bottom: -4rem !important;
  }

  /*************************************************
    About PC
  *************************************************/

  /*========= sub-topview背景 ===============*/
  /* .b-sub-topview-inner{
    height: 364px;
  } */

  /*========= about 挨拶文 ===============*/
  .b-ab-greeting-inner {
    /* イラストの背景 */
    /* height: 800px; */
    min-height: 880px;
  }

  .b-ab-greeting-shopimg {
    height: 728px;
  }


  /*************************************************
    Information PC
  *************************************************/
  .b-info-archive-inner {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem;
  }

  .b-info-archive-inner-post {
    width: 73%;
    margin-bottom: 0px;
  }

  .b-info-archive-inner-side {
    width: 23%;
  }

  /*========= 記事一覧 ===============*/
  /* PC　横に並べる */
  .b-info-archive-inner-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(3, 1fr); */
    grid-template-rows: repeat(1, 1fr);
    column-gap: calc(100% * 10/960);
    row-gap: 1.25rem;

    margin-bottom: 5rem;
  }

  .b-info-archive-inner-card-parts {
    width: 96%;
    margin-bottom: 0px;
  }

  .b-info-archive-inner-card-parts__date {
    position: absolute;
    bottom: 0;
    right: 10px;
    z-index: 10;
  }

  /*========= サイドバー ===============*/
  /* PCでは　縦に並べる　*/
  .b-info-archive-inner-side {
    display: block;
    /* grid-template-rows: repeat(2, 1fr); */
    /* column-gap: calc(100% * 40/960); */

  }

  /*************************************************
    Information Single PC
  *************************************************/
  .b-info-single-inner {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem;
  }

  .b-info-single-inner-main {
    width: 73%;
    margin-bottom: 0px;
  }

  .b-info-single-inner-main-txt {
    /* font-size: 1rem; */
    /* margin-bottom: 2.5rem; */
  }


  .b-info-single-inner-side {
    width: 23%;
  }

  /* 関連記事を横並び 微調整　これから*/
  .b-info-single-inner-main-relat-wrap {
    display: flex;
    justify-content: space-between;
  }

  /* ページネーションをmain中央に */
  .b-sub-pagenation-list--single {
    justify-content: center;

  }

  /*************************************************
    for WP Contact Large(PC)
  *************************************************/

  .b-form-box__name,
  .b-form-box__email,
  .b-form-box__tel,
  .b-form-box__title,
  .b-form-box__mes {
    /* border-bottom: dotted 2px rgb(191, 180, 134); */
    float: left;
    width: 16em;
    /* width: 100%; */
    font-size: .875rem;
    line-height: 1;
    padding: 1.6rem 0 1rem 1rem;
    white-space: nowrap;
  }

  .b-form-box__inputspace {
    min-height: 5rem;
    background-color: var(--white);
    /* border: 1px solid var(--white); */
    /* border: 1px solid var(--key_green); */
    border-radius: 4px;

    padding: 20px 20px 20px 16em;
    margin-bottom: .4rem;
    /* border-bottom: dotted 2px rgb(191, 180, 134); */
  }

  /*************************************************
  for WP 食パン予約ページのsubtopの指定 Large(PC)
*************************************************/
  /*========= reserve 予約フロー ===============*/
  .b-res-flow__desc {
    font-size: 1.5rem;
  }

  .b-res-flow__timeinner {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  /* 2 受け取り時間枠 */
  .b-res-flow__timebox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: var(--white); */
    border-radius: 23px;
    width: 130px;
    height: 130px;
    margin-top: 1.1875rem;
    margin-left: 15px;
    margin-right: 15px;
    padding: 1.25rem .75rem;
  }

  .b-res-flow__time {
    font-size: 1.25rem;
  }

  .b-res-flow__closing,
  .b-res-flow__supplement {
    font-size: 1rem;
  }

  .b-res-flow__sp {
    display: none;
  }

  .b-res-flow__closingtxt,
  .b-res-flow__closingtime {
    display: inline-block;
  }

  /*
    COMMON PC
  ================================================ */
  /* top h2 heading */
  /* for WP pagenation  */
  .nav-links .page-numbers {
    font-size: 1rem;
    justify-content: flex-start;
  }

  /* prev & next */
  .nav-links .page-numbers a,
  .nav-links .page-numbers span {
    height: 70px;
    /* テキストを縦方向中央にするために、line-heightを親要素の高さと同じにする */
    line-height: 70px;
    width: 60px;
  }

  .nav-links .page-numbers .prev,
  .nav-links .page-numbers .next {
    width: 110px;
  }

  /* prev */
  .nav-links .page-numbers .prev {
    border-radius: calc(70px * (20/35)) 0 0 calc(70px * (20/35));
  }

  /* next */
  .nav-links .page-numbers .next {
    border-radius: 0 calc(70px * (20/35)) calc(70px * (20/35)) 0;
  }

  /* .b-top-titlebox-h2 {} */

  .b-top-titlebox-h2__heading {
    font-size: 2.5rem;
  }

  .b-btn-box__link {
    font-size: 1rem;
  }

  /* sub h1 heading */
  .b-sub-titlebox-h1 {
    font-size: 2.5rem;
  }

  /* sub h2 heading */
  /* .b-sub-titlebox-h2 {
    font-size: 2.5rem;
  } */

  .b-sub-titlebox-undertxt {
    font-size: 1rem;
  }

  /* sub h2 heading */
  .sub-titlebox-h2__heading {
    font-size: 2rem;
  }

  /* sub h3 heading */
  /* .sub-titlebox-h3__heading {
    font-size: 2rem;
  } */

  /* sub for side h4 heading */
  .sub-titlebox-h4__heading {
    /* font-size: 2rem; */
  }


  /* b-sub-pagenation */

  /* .b-sub-pagenation-list {
    font-size: 1rem;
  } */

  .b-sub-pagenation-list__prev,
  .b-sub-pagenation-list__next,
  .b-sub-pagenation-list__current,
  .b-sub-pagenation-list__other {
    display: block;
    /* padding: 0 20px; */
    height: 70px;
    /* テキストを縦方向中央にするために、line-heightを親要素の高さと同じにする */
    line-height: 70px;
    transition: all .4s ease;
  }

  .b-sub-pagenation-list__prev,
  .b-sub-pagenation-list__next {
    /* width: 70px; */
    /* width: min(100px, calc(100vw * 70/375)); */
    width: 110px;
  }

  .b-sub-pagenation-list__current,
  .b-sub-pagenation-list__other {
    width: 60px;
  }

  .b-sub-pagenation-list__prev {
    border-radius: calc(70px * (20/35)) 0 0 calc(70px * (20/35));
  }

  .b-sub-pagenation-list__next {
    border-radius: 0 calc(70px * (20/35)) calc(70px * (20/35)) 0;
  }

  .b-sub-pagenation-list__prev--single,
  .b-sub-pagenation-list__next--single {
    width: 130px;
  }


  /* breadcrumb */
  /* .b-breadcrumb {
    margin-bottom: 2.5rem;
  }
  .b-breadcrumb li{
    font-size: .875rem;

  } */

}