@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

body {
font-family: "Jost", sans-serif;
font-weight: 600;
font-style: normal;
}
.header-container, .navi, .main {
background-color: transparent !important;
}
.main {
padding: 0px !important;
}
#content .navi {
background-color: #fff !important;
}

#header-container #navi a {
color: #ededed;
}
img.site-logo-image {
width: 160px;
}
body.category,
body.page-id-12 {
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/bg-image02.gif");
background-repeat: repeat;
background-size: 100% auto;
background-position: left top;
}
body.category .content-all {
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/bg-image.gif");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
}
/* 固定ページ-抹茶トップ */
body.page-id-387 .content-all {
position: relative;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/bg-image02.gif");
background-repeat: repeat;
background-size: 100% auto;
background-position: left top;
}
body.page-id-387 .content-all:before {
content: "";
position: absolute;
width: 100%;
height: 200px;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/bg-image.gif");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
}

/* 固定ページ-問い合わせ */
body.page-id-14 .content-all,
body.page-id-205 .content-all,
body.page-id-189 .content-all,
body.page-id-2 .content-all {
background: #f6f6f6;
}
body.page-id-14 .content-in,
body.page-id-205 .content-in,
body.page-id-189 .content-in,
body.page-id-2 .content-in {
padding: 100px 0px;
}
body.page-id-14 main,
body.page-id-205 main,
body.page-id-189 main,
body.page-id-2 main {
padding: 50px 0px;
background: #fff !important;
}
.entry-content {
margin-bottom: 0px;
}
.article {
margin-bottom: 0px !important;
}

/* 	ふわっと切り替え */
a { transition: 0.5s; }
a:hover { opacity: 0.7; }

/* 	表示切り替え */
.pc-only { display: block !important; }
.sp-only { display: none !important; }
.br-pc { display: block !important; }
.br-sp { display: none !important; }
@media screen and (max-width: 520px) {
  .br-pc { display: none !important; }
  .br-sp { display: block !important; }
}
.display-none { display: none !important; }

/* スマホの時は有効、PCのみ無効に */
a[href*="tel:"] {
pointer-events: none;
}
@media only screen and (max-width: 1024px) {
  a[href*="tel:"] {
  pointer-events: initial;
  }
}
.header-container-in.hlt-top-menu .logo-header img {
width: 221px;
}
/* searchの時だけロゴを変更 */
body.search .header-container-in.hlt-top-menu .logo-header {
width: 221px;
height: 42px;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads/2026/01/logo_txt.png");
background-size: 100% auto;
}
body.search .header-container-in.hlt-top-menu .logo-header img {
opacity: 0;
}
@media screen and (max-width: 1023px){
  .content-all {
  background: none;
  }
  #content .navi {
  display: none;
  }
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }
}


/* フルスクリーンにする設定 */

.container {
position: relative;
overflow: hidden;
z-index:1;
}
.content {
margin-top: 0px;
}
#appeal, .appeal-in, .header-container {
position: absolute;
top: 0;
margin: 0 calc(50% - 50vw);
width: 100vw;
}
#appeal, .appeal-in {
height: 100vh;
background-size: cover;
}
/* トップだけの設定 */
body.page-id-12 .container .header-container,
body.page-id-12 #navi,
.visual-cate#page-12 { /* トップページは別でvisualを設定 */
display: none;
}
.header-container {
z-index: 3;
}
#appeal {
position: relative;
z-index: 2;
height: 100vh;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads/2026/01/background.jpg");
}
@media screen and (max-width: 1023px){
  #appeal {
  width: inherit;
  height: calc(100dvh - 50px); /* ヘッダーの高さを引いた残りを全画面 */
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads/2026/01/background.jpg");
  background-attachment: scroll;
  }
}
@keyframes move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
html { scroll-behavior: smooth;}

/*  トップページ    */

article#post-12 header {
display: none;
}
h1.h1-top {
margin-top: 90px;
}
h1.h1-top .fz-48px {
font-family: "Fjalla One", sans-serif;
font-size: 55px;
font-weight: 500;
}
h2.top-cate-overlay {
position: absolute;
top: 32px;
left: 50%;
transform: translate(-50%, 0%);
width: 100%;
font-size: 43px;
font-weight: 400;
color: #fff !important;
text-align: center;
opacity: 0.9;
background-color: transparent !important;
pointer-events: none; /* 下にある画像のクリックを邪魔しない */
}
h2.top-cate-overlay span.ja {
display: block;
margin-top: 4px;
font-family: "Fjalla One", sans-serif;
font-size: 48px;
color: #fff;
opacity: 0.9;
letter-spacing: 0.055em;
}
h2.top-cate-overlay span.ja.bowl {
margin-top: 39px;
}
h2.h2-top {
font-family: "Fjalla One", sans-serif;
position: relative;
padding: 105px 0px 60px !important;
width: 100%;
font-size: 48px !important;
font-weight: 400 !important;
text-align: center;
letter-spacing: 0.03em
}
h2.h2-top.premium:before {
font-family: "Jost", sans-serif;
content: "Premium";
position: absolute;
top: 120px;
left: 50%;
font-size: 44px;
letter-spacing: 0;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
h2.h2-top.h2-matcha {
padding-top: 155px !important;
}
h2.h2-top.h2-greentea {
padding-top: 125px !important;
}
h2.h2-top.h2-matcha {
width: 100%;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/bg-image03.gif");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
background-color: #fff;
}
h2.h2-top.premium.h2-greentea:before {
top: 90px;
}
.top-txt01 {
position: relative;
padding-top: 180px;
font-weight: 600;
line-height: 180%;
}
.top-txt01:before {
content: "";
position: absolute;
top: 50px;
left: 50%;
width: 109px;
height: 160px;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads/logo_illust.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
.top-cate-bn {
display: flex;
margin: 105px 0px 0px;
padding-bottom: 200px;
width: 100%;
background: #fff;
}
.top-cate-bn img {
width: 100%;
height: auto;
}
.banner-wrapper {
position: relative;
display: inline-block; /* 画像のサイズに合わせる */
width: 33.33333333%;
}
.base-image {
display: block;
width: 100%;
height: auto;
}
p.top-ttl {
display: flex;
align-items: center;
justify-content: center;
margin: 0px !important;
padding: 0px !important;
width: 100%;
height: 460px;
font-size: 53px;
font-weight: 500;
color: #fff;
background-size: cover;
}
.top-ttl.matcha-bg { background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-bg-matcha-pc.webp"); }
.top-ttl.sweets-bg { background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-bg-sweets-pc.webp"); }
.top-ttl.bowl-bg { background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-bg-bowl-pc.webp"); }

/* カテゴリ毎に投稿を表示 */

.custom-post-grid {
display: grid;
gap: 60px 25px;
margin-bottom: 40px;
}
/* 共通のデザイン（見た目） */
.custom-card a {
position: relative;
display: grid;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.custom-thumb {
margin: 0;
background: #eff2ee;
overflow: hidden;
}
.custom-thumb img {
width: 100%;
height: auto;
scale: 1.4;
border-radius: 8px;
}
.custom-cat span {
display: inline-block;
position: absolute;
top: 0.3em;
left: 0.3em;
padding: 3px 6px;
font-size: 12px;
font-weight: 500;
line-height: 100%;
background: #fff;
border: 1px solid #eee;
text-transform: lowercase;
}
.custom-cat span:first-letter {
text-transform: uppercase;  /* 最初の1文字目だけ大文字化 */
}
.custom-cat .cat-id-1, .custom-cat .cat-id-7 { color: #557b41; }
.custom-cat .cat-id-9 { color: #4a788d; }
.custom-cat .cat-id-10 { color: #d64f62; }
h3.custom-title {
margin: 0px;
padding: 0px;
font-size: 20px;
font-weight: 400;
border: none;
}
/* --- PC版 --- */
@media screen and (min-width: 769px) {
  .custom-post-grid {
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  margin: 0px auto;
  width: 80%;
  max-width: 1277px;
  }
  .custom-card {
  flex: none; /* スマホ用の幅指定を解除 */
  }
  .custom-cat span {
  position: inherit;
  margin: 0px;
  padding: 5px 25px;
  font-size: 18px;
  font-weight: 400;
  line-height: 100%;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 100px;
  }
  .custom-cat .cat-id-1, .custom-cat .cat-id-7 { border-color: #557b41; }
  .custom-cat .cat-id-9 { border-color: #4a788d; }
  .custom-cat .cat-id-10 { border-color: #d64f62; }
  .custom-cat { order: 2; margin-top: 15px; }
  .custom-thumb { order: 1; }
  h3.custom-title { order: 3; padding-top: 10px; }
  .custom-sub { order:4; margin: 0px !important; }
}

/* --- スマホ版 768px以下 --- */
@media screen and (max-width: 768px) {
  .custom-post-grid {
  margin-bottom: 20px !important;
  }
  .custom-post-grid.scroll-box {
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 40%; /* 半分見せる */
  gap: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-left: calc(50% - 50vw); /* 親要素の余白を無視して全幅にする */
  margin-right: calc(50% - 50vw); /* 親要素の余白を無視して全幅にする */
  padding: 0 20px;
  width: 100vw;
  scroll-snap-type: x mandatory; /* スナップさせて1枚ごとに止める */
  }
  .custom-card {
  flex: 0 0 40%; /* 1枚を画面の40%にする */
  }
  
  /* 抹茶トップ */
  #post-387 .custom-post-grid.scroll-box {
  grid-template-rows: repeat(8, auto);
  grid-auto-columns: 50%;
  }
  #post-387 .custom-post-grid {
  overflow: inherit;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 0.5%;
  row-gap: 1em;
  width: 100%;
  padding: 0px;
  }
  #post-387 .custom-card {
  flex: initial;
  padding: 7px;
  width: 100%;
  }
  #post-387 .custom-thumb {
  margin-bottom: 0.2em;
  font-size: 16px;
  background: #fff;
  }
  #post-387 h3.custom-title {
  font-weight: 500;
  }
}
.tbn-more {
margin-top: 80px !important;
margin-bottom: 90px !important;
width: 80%;
max-width: 240px;
}
.bn-matcha {
margin-bottom: 0px !important;
border-bottom: 1px dotted #737373;
}
.bn-matcha.matcha-top {
margin-left: calc(50% - 50vw); /* 親要素の余白を無視して全幅にする */
margin-right: calc(50% - 50vw); /* 親要素の余白を無視して全幅にする */
width: 100vw;  
}
.tbn-more a {
padding: 8px;
font-size: 26px !important;
background: #201c1c;
}
.tbn-more a:hover {
color: #fff;
}

/* what matcha */
h2.h2-t-what {
margin: 0px 0px 35px;
padding: 0px;
font-size: 48px;
font-weight: 500;
text-align: center;
}
.t-wht-wrp {
margin: 50px 0px 0px;
}
.t-wht-cont {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 650px;
background: #fff;
}
.t-wht-cont.oem-head {
height: auto;
}
.t-wht-cont:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-wht-img01-pc.webp");
background-size: cover;
background-position: right top;
}
.t-wht-cont.oem-head:before {
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-oem.webp");
}
.t-wht-cont:nth-child(2) {
justify-content: flex-start;
}
.t-wht-cont:nth-child(2):before {
left: inherit;
right: 0;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-wht-img02-pc.webp");
background-position: left top;
}
.t-wht-txt {
width: 50%;
}
.t-what-txt {
margin-bottom: 25px !important;
padding: 0px 10%;
font-size: 18px;
line-height: 170%;
}
/* partner ship */
h2.h2-partner {
margin: 100px 0px 35px;
padding: 0px;
font-size: 45px;
font-weight: 500;
text-align: center;
}
h3.h3-partner {
margin: 0;
padding: 15px 0px;
background: #201c1c;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: none;
}
h3.h3-partner span.part-span {
padding: 22px;
font-size: 20px;
font-weight: 500;
color: #fff;
text-align: center;
}
.partner-wrp {
margin: 0px;
padding: 20px 0px 100px;
width: 100%;
background: #fff;
}
.partner-cont {
margin: 0px auto;
width: 85%;
max-width: 535px;
font-size: 24px;
text-align: center;
background: #fff;
border: 1px solid #433838;
border-radius: 10px;
}
.partner-txt {
margin: 0px;
padding: 0px;
font-size: 20px;
text-align: center;
}
a.part-mail {
display: block;
padding: 20px 0px;
font-size: 23px;
color: #1e1616;
text-decoration: none;
}

@media screen and (min-width: 1300px){
  .t-what-txt {
  padding: 0px 90px 0px 100px;
  }
}

@media screen and (max-width: 1023px){
  h1.h1-top {
  margin-top: 25px;
  }
  h1.h1-top .fz-48px {
  font-size: 33px;
  }
  h2.top-cate-overlay {
  top: 32px;
  font-size: 30px;
  font-weight: 400;
  }
  h2.top-cate-overlay span.ja {
  margin-top: 4px;
  font-size: 38px;
  }
  h2.top-cate-overlay span.ja.bowl {
  margin-top: 10px;
  }
  h2.h2-top.h2-matcha {
  background: none;
  }
  .top-txt01:before {
  top: 15px;
  width: 82px;
  height: 120px;
  }
  .top-txt01 {
  padding-top: 100px;
  margin-bottom: 15px !important;
  line-height: 160%;
  }
  .top-txt01 .fz-40px {
  font-size: 23px;
  }
  .top-txt02 {
  padding: 0px 30px;
  text-align: left;
  line-height: 150%;
  }
  .top-txt02 .fz-20px {
  font-size: 16px;
  }
  .top-cate-bn {
  margin-top: 50px;
  padding-bottom: 50px;
  }
  .bn-matcha {
  padding-bottom: 30px;
  }
  p.top-ttl {
  height: 250px;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.07em;
  }
  p.top-ttl.matcha-bg { background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-bg-matcha-sp.webp"); }
  p.top-ttl.sweets-bg { background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-bg-sweets-sp.webp"); }
  p.top-ttl.bowl-bg { background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-bg-bowl-sp.webp"); }
  /* what matcha */
  h2.h2-t-what {
  margin: 0px 0px 15px;
  }
  .t-wht-wrp {
  margin: 0px;
  }
  .t-wht-cont {
  display: block;
  height: auto;
  }
  .t-wht-cont:before {
  width: 100%;
  height: 350px;
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-wht-img01-sp.webp");
  }
  .t-wht-cont:nth-child(2):before {
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/top-wht-img02-sp.webp");
  }
  .t-wht-txt {
  padding-top: 400px;
  padding-bottom: 30px;
  width: 100%;
  }
  /* partner ship  */
  .h2-partner {
  margin: 0px 0px 25px;
  }
}
/*480px以下*/
@media screen and (max-width: 480px){
  h2.top-cate-overlay {
  top: 32px;
  font-size: 30px;
  font-weight: 400;
  }
  h2.top-cate-overlay span.ja {
  margin-top: 4px;
  font-size: 38px;
  }
  h2.top-cate-overlay span.ja.bowl {
  margin-top: 10px;
  }
  h2.h2-top {
  margin-bottom: 6px !important;
  padding-top: 25px !important;
  padding-bottom: 15px !important;
  font-size: 30px !important;
  }
  h2.h2-top.h2-matcha,
  h2.h2-top.h2-greentea {
  padding-top: 60px !important;
  }
  h2.h2-top.premium:before,
  h2.h2-top.premium.h2-greentea:before {
  top: 42px;
  font-size: 27px;
  }
  h2.h2-top.matcha-top {
  padding-top: 41px !important;
  font-size: 26px !important;
  padding-bottom: 0px !important;
  letter-spacing: 0.05em;
  }
  h2.h2-top.matcha-top:before {
  top: 24px;
  font-size: 24px;
  }
  h3.custom-title {
  margin-top: 5px;
  font-size: 15px;
  }
  .banner-wrapper {
  display: block;
  width: 100%;
  }
  .top-cate-bn {
  display: block;
  margin-top: 20px;
  padding-bottom: 35px;
  }
  p.top-ttl {
  height: 180px;
  font-size: 37px;
  }
  .tbn-more {
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  }
  .tbn-more a {
  font-size: 20px !important;
  }
  /* what matcha */
  h2.h2-t-what {
  margin-bottom: 10px;
  font-size: 35px;
  }
  .t-wht-cont:before {
  width: 100%;
  height: 230px;
  }
  .t-wht-txt {
  padding-top: 250px;
  padding-bottom: 10px;
  }
  .t-what-txt {
  margin-bottom: 15px !important;
  font-size: 16px;
  line-height: 140%;
  }
  /* partner ship  */
  h2.h2-partner {
  margin: 0px 0px 10px;
  font-size: 35px;
  }
  h3.h3-partner {
  padding: 7px 0px;
  }
  .partner-wrp {
  padding: 20px 0px 30px;
  }
  .partner-txt {
  margin: 0px 0px 10px !important;
  padding: 0px 10%;
  font-size: 16px;
  }
  h3.h3-partner span.part-span,
  a.part-mail {
  padding: 10px 0px;
  font-size: 17px;
  }
}



/*   共通   */
.list { margin-bottom: 0px !important; }

/*   アピールエリア（トップページ）   */
.t-logo {
position: absolute;
top: 50%;
left: 50%;
width: 260px;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
.t-logo img {
width: 100%;
height: auto;
}
.t-lang {
position: absolute;
font-family: "Fjalla One", sans-serif;
top: 42px;
right: 110px;
color: #fff;
}
.t-lang .lang-en {
position: relative;
}
.t-lang .lang-en:before {
content: "/";
font-size: 19px;
padding: 0px 5px;
}
.t-lang a {
text-decoration: none;
color: #fff;
}
.t-lang a:hover {
opacity: 0.7;
}

/*   PCトップページだけのハンバーガーメニュー   */
#hbg-toggle {
display: none;
}
.hbg-menu_button {
position: absolute;
top: 40px;
right: 43px;
width: 60px;
height: 50px;
cursor: pointer;
z-index: 9999;
}
.hbg-menu_line {
position: absolute;
left: 14px;
width: 75%;
height: 2px;
background-color: #fff;
border-radius: 2px;
transition: background-color 0.3s, top 0.3s, left 0.3s, transform 0.3s, opacity 0.3s;
}
.hbg-menu_line:nth-of-type(1) { top: 13px; }
.hbg-menu_line:nth-of-type(2) { top: 21px; width: 50%; }
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_line {
background-color: #fff;
}
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_line:nth-of-type(1) {
left: 16px;
top: 10px;
transform: translateY(6px) rotate(-45deg);
}
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_line:nth-of-type(2) {
left: 16px;
top: 22px;
width: 75%;
transform: translateY(-6px) rotate(45deg);
}

@media (max-width: 600px) {
  .t-logo {
  width: 200px;
  }
  .t-lang,
  .hbg-menu {
    display: none;
  }
}

/* container */
.hbg-menu_content {
opacity: 0;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100vh;
z-index: -1;
pointer-events: none;
transition: opacity 0.3s, z-index 0s 0.3s;
}
.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_content {
opacity: 1;
z-index: 999;
pointer-events: auto;
transition-delay: 0s;
}
.hbg-menu_content ul {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
list-style: none;
opacity: 0;
z-index: 999;
}
.hbg-menu_item {
display: block;
text-align: center;
font-size: 1.4rem;
}
.hbg-menu_item:not(:last-child) {
margin-bottom: 1rem;
}
.hbg-menu_item a {
font-family: "Fjalla One", sans-serif;
color: #fff;
text-decoration: none;
padding-bottom: 0.5em;
}
@keyframes fade-in {
  to { opacity: 1; }
}

.hbg-menu:has(#hbg-toggle:checked) .hbg-menu_content ul {
animation: fade-in 0.5s ease-in forwards;
}

/*   モバイルメニュー   */

@media (max-width: 1023px) {
  span.fa-star:before {
  content: "\f003" !important;
  }
  .mobile-menu-buttons {
  font-size: 20px;
  }
  .mobile-menu-buttons .menu-icon {
  font-size: 25px !important;
  }
  .mobile-menu-buttons .menu-caption {
  display: none;
  }
  .menu-close-button {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.5em;
  position: sticky !important;
  z-index: 9;
  top: 0px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(2px);
  }
  .menu-close-button:after {
  content: "CLOSE";
  font-size: 10px;
  }
  .menu-close-button .fa-close {
  margin: 0px auto;
  }
  .menu-content {
  background: #fafaf9;
  }
  .search-menu-box {
  position: relative;
  max-width: 300px;
  margin: 1em 1.5em;
  }
  .search-menu-box .search-edit {
  border: none;
  background: #ebede5;
  border-radius: 7px;
  }
  .menu-drawer a {
  padding: 15px;
  text-align: center;
  }
  .search-menu-box .fa-search {
  color: #333;
  }
  
  /* 日本語サイトが出来るまで非表示 */
  .lang-menu { display: none; }
  /*
  .lang-menu {
  position: relative;
  margin: 0px 1.5em;
  padding: 20px 0px 0px;
  text-align: center;
  }
  .lang-menu:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #5f7717 4px, transparent 4px);
  background-position: center;
  background-size: .5rem 100%;
  background-repeat: repeat-x;
  }
  .lang-menu .lang-ja,
  .lang-menu .lang-en {
  font-size: 17px;
  }
  .lang-menu .lang-en {
  position: relative;
  }
  .lang-menu .lang-en:before {
  content: "/";
  font-size: 20px;
  padding: 0px 10px;
  }
  .lang-menu a {
  font-size: 17px;
  color: #221d1b;
  text-decoration: underline;
  }
  .lang-menu a:hover {
  opacity: 0.7;
  }
  /* 日本語サイトが出来るまで非表示 ここまで */
  
  .bn-menu-custom {
  max-width: 300px;
  margin: 1em 1.5em;
  }
  .bn-menu-custom a {
  font-family: "Fjalla One", sans-serif;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  padding: 1em;
  padding-right: 2em;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  border: 1px solid #333;
  border-radius: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  }
  .bn-menu-custom a:after {
  content: '';
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  width: .9em;
  height: .2em;
  transform: skewX(45deg);
  position: absolute;
  right: 1.2em;
  bottom: 50%;
  transition: border-color 0.3s, right 0.3s;
  }
}

/*   ヘッダー   */
.header-container-in.hlt-top-menu {
padding: 35px 40px 0px 30px;
width: 100% !important;
}

/* 日本語サイトが出来るまで非表示 */
.h-lang, .t-lang { display: none; }
/*
.h-lang {
display: flex;
flex-direction: row-reverse;
width: 20%;
}
.h-lang .lang-ja,
.h-lang .lang-en,
.h-lang a {
font-family: "Fjalla One", sans-serif;
color: #fff;
font-size: 18px;
letter-spacing: 0.08em;
}
.h-lang .lang-en {
position: relative;
}
.h-lang .lang-en:before {
content: "/";
font-size: 18px;
padding: 0px 5px;
}
.h-lang a {
text-decoration: none;
transition: 0.5s;
}
.h-lang a:hover {
opacity: 0.7;
text-decoration: none;
transition: 0.5s;
}
/* 日本語サイトが出来るまで非表示 ここまで */


/*   ナビゲーション   */
.navi-in {
width: 100%;
}
.navi-in > ul li {
width: 12%;
max-width: 160px;
height: 90px;
letter-spacing: 0.05em;
}
.navi-in a {
font-size: 19px;
}
/*   カテゴリトップ   */
.visual-cate {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 1000px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.visual-cate#post-1,
.visual-cate#post-7,
.visual-cate#page-387 { /* 抹茶 */
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-matcha-pc.webp");
}
.visual-cate#post-7 { /* 緑茶 */
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-greentea-pc.webp");
}
.visual-cate#post-9 { /* 茶器 */
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-bowl-pc.webp");
}
.visual-cate#post-10 { /* スイーツ */
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-sweets-pc.webp");
}
.visual-cate#page-2 { /* 会社案内 */
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-company-pc.webp");
}
.visual-cate#page-14,
.visual-cate#page-205,
.visual-cate#page-189 { /* 問い合わせ */
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-contact-pc.webp");
}
.visual-cate#page-13,
body.search .visual-cate { /* OEM */
display: none;
}

/*   タイトル   */
.archive-title,
.second-title,
.visual-cate h1.entry-title {
position: relative;
width: 100%;
font-size: 53px;
color: #fff;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
}
.second-title {
font-family: "Fjalla One", sans-serif;
margin-top: 40px;
font-size: 45px;
color: #1e1616;
}
.archive-title .fa,
.second-title .fa {
display: none;
}
.visual-cate#post-1 .archive-title,
.visual-cate#post-7 .archive-title,
.visual-cate#post-10 .archive-title,
.visual-cate#page-387 .entry-title {
padding-top: 45px;
}
#post-1.second-title,
#post-7.second-title,
#post-10.second-title,
#page-387.entry-title {
margin-top: 80px;
padding-top: 20px;
color: #221d1b;
}
.visual-cate#post-1 .archive-title:before,
.visual-cate#post-7 .archive-title:before,
.visual-cate#post-10 .archive-title:before,
.visual-cate#page-387 .entry-title:before,
#post-1.second-title:after,
#post-7.second-title:after,
#post-10.second-title:after {
content: "PREMIUM JAPANESE";
position: absolute;
top: 0px;
left: 50%;
width: 100%;
font-size: 53px;
color: #fff;
font-weight: 500;
letter-spacing: 0.05em;
transform: translate(-50%,-50%); /* positionに対して要素を中央に配置させる */
}
#post-1.second-title:after,
#post-7.second-title:after,
#post-10.second-title:after {
content: "Premium";
font-family: "Jost", sans-serif;
font-size: 42px;
font-weight: 400;
color: #221d1b;
letter-spacing: 0;
}
#post-1.second-title:before,
#post-7.second-title:before,
#post-10.second-title:before,
#post-9.second-title:before {
content: "JAPANESE";
display: inline-block;
padding-right: 13px;
color: #221d1b;
font-weight: 500;
letter-spacing: 0.05em;
}
/* 茶器 */
.visual-cate#post-9 .archive-title:before,
#post-9.second-title:before {
content: "MATCHA ";
}
/* 問い合わせ */
#page-14.second-title,
#page-189.second-title,
#page-2.second-title {
padding: 35px 0px 45px;
border-bottom: 1px solid #e4e4e4;
}

/*   アーカイブ   */

/*   アイキャッチ画像高さ変更   */
.ect-vertical-card .entry-card-wrap .entry-card-thumb {
background: #fff;
overflow: hidden;
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
height: 250px;
scale: 120%;
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img:hover {
opacity: 0.7;
transition: 0.3s;
}
.card-thumb img:hover {
opacity: 0.7;
transition: 0.3s;
}
.related-entry-card-title, .entry-card-title {
font-weight: 500;
line-height: 115%;
}
/*   カテゴリ名   */
.cat-label {
top: 0.3em;
left: 0.3em;
font-size: 12px;
font-weight: 500;
color: var(--cocoon-white-color);
padding: 1px 6px;
display: inline-block;
text-transform: lowercase;  /* 全て小文字化 */
}
.cat-label:first-letter {
text-transform: uppercase;  /* 最初の1文字目だけ大文字化 */
}

/*   アイキャッチ画像高さスマホ用   */
@media screen and (max-width: 510px) {
  .ect-vertical-card .entry-card-wrap .entry-card-thumb img{
  height:150px;
  }
}

/* 詳細ページからの問い合わせバナー */
#text-3.widget-above-related-entries {
display: flex;
justify-content: center;
margin: 70px 0px 30px;
}
#text-3.widget-above-related-entries a.btn-primary {
display: block;
padding: 13px 65px;
font-size: 28px;
font-weight: 400;
color: #fff;
background: #1e1616;
border: 1px solid #1e1616;
border-radius: 50px;
}
#text-3.widget-above-related-entries a.btn-primary:hover {
color: #1e1616;
background: #fff;
}
/*   抹茶トップ   */
#post-387 header.entry-header {
display: none;
}
#post-387 .entry-content {
margin-top: 0px;
}

body.page-id-13 nav.navi {
display: none;
}
body.page-id-13 .mid-custom-navi nav.navi {
display: block;
}

/*   OEM   */
h1.h1-oem {
margin: 0px;
padding: 0px;
max-width: 470px;
font-size: 55px;
font-weight: 500;
line-height: 125%;
}
h2.h2-oem {
margin: 0px;
padding: 20px 0px 25px;
font-size: 39px;
font-weight: 400;
line-height: 125%;
}
h2.h2-oem02,
h2.h2-oem03 {
padding: 0px 40px 35px;
font-size: 37px;
font-weight: 500;
line-height: 125%;
text-align: center;
}
h2.h2-oem03 {
padding: 0px 40px 30px;
font-size: 41px;
}
.oem-txt-head {
padding: 60px 0px 60px 100px;
width: 50%;
}
.oem-txt01 {
margin: 0px !important;
padding: 0px 0px 15px;
max-width: 520px;
font-size: 20px;
line-height: 170%;
}
.oem-txt02 {
margin: 0px !important;
padding: 0px 0px 50px;
font-size: 21px;
text-align: center;
line-height: 160%;
}
.oem-txt03 {
margin: 0px !important;
padding: 50px 0px 85px;
font-size: 28px;
text-align: center;
line-height: 160%;
}
.oem-section {
padding: 110px 0px 50px;
width: 100%;
background: #f7f7f7;
}
.oem-fg {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 4列 */
gap: 25px;
margin: 0px auto;
width: 90%;
max-width: 920px;
}
.fg-list {
padding: 40px 20px 50px;
background: #fff;
}
.fg-list.last {
padding: 40px 20px 35px;
}
.fg-list img {
display: flex;
margin: 0px auto 30px;
width: 100%;
max-width: 251px;
}
p.fg-ttl {
display: block;
margin: 0px;
padding: 0px;
font-size: 19px;
font-weight: 500;
text-align: center;
line-height: 120%;
}
p.fg-ttl.last {
font-size: 18px;
text-align: left;
}
span.oem-detail {
display: block;
font-weight: 400;
}
.oem-img01,
.oem-img02 {
margin: 95px auto 100px;
width: 90%;
max-width: 920px;
}
.oem-img02 {
margin: 0px auto 100px;
}
.oem-img01 img,
.oem-img02 img {
width: 100%;
height: auto;
}



/*   会社案内   */
h3.h3_about {
margin: 0px;
padding: 6px 0px;
font-size: 17px;
font-weight: 500;
text-align: center;
background: #ececec;
border: none;
letter-spacing: 0.05em;
}
figure.wp-block-table {
overflow: hidden;
}
figure.about table th {
width: 100%;
padding: 13px 0px 7px 20px;
font-size: 18px;
font-weight: 500;
line-height: 130%;
color: #1e1616;
text-align: left;
white-space: nowrap;
}
figure.about table td {
padding: 0px 20px 18px 20px;
font-size: 17px;
line-height: 130%;
color: #1e1616;
border-bottom: 1px solid #dedede;
white-space: normal;
}
figure.about table td span {
display: block;
padding: 0px 0px 5px;
font-size: 1.5rem;
}
@media (max-width: 767px) {
  figure.about table,
  figure.about table tr,
  figure.about table th,
  figure.about table td {
  display: block;
  width: 100%;
  }
  figure.about table {
  margin-top: -13px;
  }
}
@media (min-width: 768px) {
  figure.about table {
  border-collapse: separate;
  border-spacing: 30px 0;
  position: relative;
  margin: 50px auto 50px;
  width: 90%;
  }
  figure.about table th {
  width: 20%;
  padding: 30px 20px 30px 0px;
  margin: 0px;
  font-size: 21px;
  font-weight: normal;
  border-bottom: 1px solid #dedede;
  }
  figure.about table td {
  padding: 26px 20px 26px 0px;
  font-size: 21px;
  line-height: 180%;
  }
  figure.about table tr:first-child th,
  figure.about table tr:first-child td {
  border-top: 1px solid #dedede;
  }
}
@media (min-width: 992px) {
  figure.about table {
  margin: 75px auto 50px;
  width: 70%;
  }
}
@media (min-width: 1200px) {
  figure.about table {
 margin: 75px auto 50px !important;
  width: 800px;
 }
  figure.about table th {
  width: 25%;
  }
  figure.about table td {
  margin-left: 30%;
  }
}
/* 支店 */
h4.h4_about {
margin: 0px;
padding: 10px 0px 0px;
font-size: 17px;
font-weight: 600;
}
.brunch {
width: 90%;
margin: 0px auto 0px;
}
.brunch:last-child {
padding-bottom: 20px;
}
.brunch_cont {
margin: 0px 0px 5px;
padding: 5px 0px;
}
.bruct {
border-bottom: 1px solid #ccc;
}
dl.brunch_waku {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
}
dl.brunch_waku dt {
position: relative;
width: 20%;
padding: 10px 0px 0px 0px;
font-size: 15px;
font-weight: 400;
text-align: center;
line-height: 100%;
}
dl.brunch_waku dt:before {
content: "[";
position: absolute;
top: 10px;
left: 1px;
}
dl.brunch_waku dt:after {
content: "]";
position: absolute;
top: 10px;
right: 0px;
}
dl.brunch_waku dd {
width: 80%;
margin: 0px;
padding: 7px 0px 0px 15px;
font-size: 15px;
font-weight: 400;
line-height: 130%;
}
.brunch_cont a {
text-decoration: underline;
}
.brunch_cont a:hover {
opacity: 0.7;visual-cate
text-decoration: none;
}
@media (min-width: 768px) {
  h4.h4_about {
  padding: 15px 0px 5px 5px;
  }
  .brunch {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  }
  .brunch:last-child {
  padding-bottom: 40px;
  }
  .bruct {
  border: none;
  }
  .brunch_cont {
  margin: 0px;
  padding: 0px 0px 15px;
  width: 48%;
  border-bottom: 1px solid #ccc;
  }
  dl.brunch_waku dt {
  width: 80px;
  }
  dl.brunch_waku dd {
  font-size: 16px;
  }
}
@media (min-width: 1430px) {
  .brunch {
  width: 85%;
  }
}
@media (min-width: 1700px) {
  dl.brunch_waku dd {
  width: 80%;
  }
}


/*   ペイジャー   */
.pagination-next {
display: none;
}
.page-numbers {
background-color: #fff;
border: 0;
border-radius: 0;
margin: 0;
padding: 0 5px;
color: #557b41;
font-weight: 500;
}
.page-numbers.prev {
border-radius: 50% 0 0 50%;
}
.page-numbers.next {
border-radius: 0 50% 50% 0;
}
.page-numbers.dots {
border: none;
background-color: #fff;
opacity: 1;
}
.pagination {
margin: 20px 0px 30px;
}
.pagination .current {
background-color: #7aa862;
color: #fff;
}
.pagination a {
transition: .4s ease;
}
.pagination a:hover {
background-color: #557b41;
color: #fff;
}
.pagination span.current:first-child, .pagination span.current:last-child {
position: relative;
}
.pagination span.current:first-child::before, .pagination span.current:last-child::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 50px;
height: 46px;
background-color: #fff;
z-index: -1;
}
.pagination span.current:first-child::before {
left: -25px;
border-radius: 50% 0 0 50%;
}
.pagination span.current:last-child::before {
right: -25px;
border-radius: 0 50% 50% 0;
}
.fa-angle-right:before,
.fa-angle-left:before {
font-size: 20px;
}
/* パンくず */
body.single .breadcrumb {
max-width: 1276px;
margin: 0px auto;
padding: 0px 0px 10px;
}
/* フッター */
.footer,
.footer-bottom {
margin: 0px;
padding: 0px;
}
.footer-in.wrap {
width: 100%;
}
.foot-area {
padding-bottom: 80px;
width: 100%;
text-align: center;
background-position: center center;
background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/footer-bg-pc.webp");
background-size: cover;
background-repeat: no-repeat;
}
.foot-area a.f-logo {
display: block;
margin: 0px auto;
padding-top: 70px;
width: 50%;
max-width: 196px;
}
.foot-area a.f-contact {
display: inline-block;
margin-top: 40px;
padding: 7px 0px;
width: 300px;
font-size: 25px;
font-weight: 400;
color: #fff !important;
background: #201c1c;
border-radius: 50px;
letter-spacing: 0.1em;
text-decoration: none;
}
.foot-area a.f-contact:hover {
color: #201c1c !important;
background: #fff !important;
opacity: 1 !important;
}
p.f-name,
p.f-address,
a.f-tel {
padding: 31px 0px 17px;
font-size: 30px;
color: #fff !important;
font-weight: 500;
line-height: 100%;
}
p.f-address {
padding: 0px 0px 15px;
font-size: 18px;
line-height: 160%;
letter-spacing: 0.03em;
}
a.f-tel {
display: block;
padding: 0px;
font-size: 20px;
letter-spacing: 0.03em;
text-decoration: none;
}
nav.navi-footer {
border-bottom: 1px solid #d7d7d7;
}
.navi-footer-in > .menu-footer {
display: flex;
justify-content: center;
}
.navi-footer-in > .menu-footer li,
.navi-footer-in > .menu-footer li:last-child {
border: none;
}
.footer-bottom.fnm-text-width .menu-footer li a {
padding: 23px 25px;
font-size: 18px;
letter-spacing: 0.05em;
}
.footer-bottom.fnm-text-width .menu-footer li a:hover {
opacity: 0.7;
}
.copyright {
padding-bottom: 8px;
letter-spacing: 0.05em;
}
.copyright span.pc-inline {
display: inline-block;
}

/*  固定ページ-サンクスページ    */
.bn-top {
margin: 0px auto;
max-width: 250px; 
}
.bn-top a:hover {
color: #fff;
}

/*   問い合わせフォーム   */

dl.contactTable {
margin: 80px auto 0px;
width: 90%;
max-width: 860px;
border-top: 1px solid #ccc;
}
dl.contactTable div {
display: flex;
align-items: center;
padding: 40px 0px;
border-bottom: 1px solid #ccc;
}
dl.contactTable div:last-child {
border: none;
}
dl.contactTable dt,
dl.contactTable dd {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0px;
padding: 0px 10px 0px 0px;
width: 30%;
font-size: 21px;
}
dl.contactTable dd {
width: 70%;
}
dl.contactTable p {
margin: 0px;
padding: 0px;
width: 97%;
}
dl.contactTable .text-area {
height: 200px;
}
span.required {
padding: 0px 0px 0px 5px;
font-size: 18px;
color: #f64545;
}
dl.contactTable dd .chu {
display: block;
margin-bottom: -13px;
padding: 6px 0px 0px;
width: 100%;
font-size: 17px;
color: #f64545;
line-height: 130%;
}
input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], textarea, select, .search-edit {
font-family: "Jost", sans-serif;
padding: 23px;
font-size: 20px;
background: #eee;
border: none;
}
/* banner */
.contactbn {
display: flex;
justify-content: center;
background: #fff;
}
.contactbn input {
font-family: "Jost", sans-serif;
padding: 13px 40px;
width: 80%;
max-width: 365px;
font-size: 30px;
color: #fff;
background: #9cb743;
border-radius: 100px;
border: none;
letter-spacing: 0.05em;
}
.contactbn input:hover {
background: #82a900;
}
.contact-attention {
margin: -60px 0px 20px;
width: 100%;
font-size: 20px;
color: #1e1616;
text-align: center;
}
.contactbn p,
.contact-attention p {
margin: 0px;
padding: 0px;
width: 100%;
}
.wpcf7-spinner {
display: block;
}
.recaptcha_bg {
padding: 25px 30px 20px;
font-size: 15px;
color: #999;
text-align: center;
}
.recaptcha_bg p {
margin-bottom: 0px;
}
.wpcf7-spinner,
.wpcf7-response-output { /* ロード中アイコンと完了のメッセージを非表示に */
display: none;
}
.wpcf7-not-valid-tip { /* エラーメッセージ */
font-size: 18px;
}
/* ラジオボタン */
input[type="radio"] {
opacity: 0;
visibility: hidden;
position: absolute;
}
.wpcf7-list-item.first {
margin-left: 0;
}
span.wpcf7-list-item-label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
span.wpcf7-list-item-label:before {
display: block;
content: "";
border-radius: 50%;
border: 2px solid #9cb743;
width: 20px;
height: 20px;
margin-right: 10px;
}
span.wpcf7-list-item-label:after {
display: block;
position: absolute;
content: "";
border-radius: 50%;
width: 12px;
height: 12px;
background-color: #557b41;
left: 6px;
top: 50%;
transform: translateY(-50%);
display: none;
}
input[type="radio"]:checked + span.wpcf7-list-item-label:after {
display: block;
}
.grecaptcha-badge { visibility: hidden; }

.go-to-top {
right: 30px;
bottom: 100px;
}
.go-to-top-button {
background: #9cb743;
border-radius: 100px;
}
.go-to-top-button .fa {
color: #fff;
}
.fa-angle-double-up:before {
content: "\f106";
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*   投稿の幅   */
@media screen and (min-width: 1265px){
  .ect-3-columns {
  column-gap: 0.9%;
  row-gap: 0;
  }
  .ect-3-columns .entry-card-wrap {
  width: 24.32%;
  }
}
/*1024px以上*/
@media screen and (min-width: 1024px){
  .content-in {
  max-width: 1276px;
  }
  body.page-id-12 .content-in,
  body.page-id-387 .content-in,
  body.page-id-13 .content-in {
  width: 100%;
  max-width: 100%;
  }
  body.single 
  img.site-logo-image { /* ヘッダーロゴサイズ */
  width: 220px;
  }
  body.single .header-container { /* 投稿ページだけレイアウトを変えるためのヘッダー */
  position: static;
  background: #fff !important;
  }
  body.single .header-container-in.hlt-top-menu {
  align-items: stretch;
  padding: 40px 40px 20px 20%;
  }
  body.single .header-container-in.hlt-top-menu .logo-header {
  padding-top: 10px;
  max-height: inherit;
  }
  body.single .header-container-in.hlt-top-menu .logo-header img {
  display: none;
  }
  body.single .header-container-in header {
  display: flex;
  justify-content: center;
  width: 80%;
  }
  body.single .header-container-in header a.site-name {
  width: 227px;
  height: 237px;
  background-position: center center;
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/logo-singlepage.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  }
  body.single .h-lang .lang-ja,
  body.single .h-lang .lang-en,
  body.single .h-lang a,
  body.page-id-13 .h-lang .lang-ja,
  body.page-id-13 .h-lang .lang-en,
  body.page-id-13 .h-lang a,
  body.search .h-lang .lang-ja,
  body.search .h-lang .lang-en,
  body.search .h-lang a {
  color: #1e1616;
  }
  body.single .content-in.wrap {
  max-width: 100%;
  width: 100%;
  }
  .search-menu-button { /* ナビのsearch */
  display: flex !important;
  justify-content: center;
  align-items: center;
  max-width: 90px !important;
  }
  .search-menu-content {
  margin: 0px auto;
  max-width: 500px;
  }
  input.search-edit {
  outline: none;
  }
  .second-title {
  margin-bottom: 45px;
  }
  .related-entry-card-title, .entry-card-title {
  margin-bottom: 30px;
  padding: 0px;
  font-size: 21px;
  font-weight: 400;
  line-height: 120%;
  }
  .bowl-label { /* 茶器の時だけテキストを追加 */
  margin-top: -30px;
  margin-bottom: 30px;
  font-size: 17px;
  }
  /*   アーカイブのカテゴリ表示   */
  .ect-vertical-card .entry-card-wrap .entry-card-thumb {
  position: relative;
  margin-bottom: 17px;
  }
  .custom-cat-label {
  margin: 0px 0px 15px; 
  padding: 5px 25px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 100px;
  line-height: 100%;
  display: inline-block;
  text-transform: lowercase;  /* 全て小文字化 */
  }
  .custom-cat-label:first-letter {
  text-transform: uppercase;  /* 最初の1文字目だけ大文字化 */
  }
  .custom-cat-label.cat-id-1, .custom-cat-label.cat-id-7 { color: #557b41; border-color: #557b41;} /* 抹茶と緑茶のカテゴリ色 */
  .custom-cat-label.cat-id-9 { color: #4a788d; border-color: #4a788d } /* 茶器のカテゴリ色 */
  .custom-cat-label.cat-id-10 { color: #d64f62; border-color: #d64f62 } /* スイーツのカテゴリ色 */
  .cat-label { display: none; } /* PCではこちらのカテゴリ名タグは非表示で上記の .custom-cat-label を利用 */
  
  /*   投稿ページ   */
  body.single .main {
  padding: 30px 0px;
  }
  body.single .entry-header {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  background: linear-gradient(to right, #eee 50%, #f9f9f9 50%);
  }
  .title-wrap {
  width: 50%;
  }
  .eye-catch-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
  }
  .eye-catch {
  display: flex;
  align-items: center;
  }
  body.single .eye-catch-wrap .cat-label {
  display: none;
  }
  .title-wrap {
  padding: 0px 0px 0px 30px;
  }
  .title-wrap h1.entry-title {
  margin-bottom: 50px;
  padding-right: 20px;
  max-width: 560px;
  font-weight: 600;
  line-height: 150%;
  }
  span.title-line {
  position: relative;
  display: block;
  padding: 0px 0px 10px 0px;
  width: 100%;
  font-size: 40px;
  font-weight: 400;
  line-height: 115%;
  }
  span.title-line:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #b9c0c0;
  }
  .table-box {
  margin-bottom: 0px !important;
  }
  .wp-block-group {
  margin: 0px 10px 5px !important;
  }
  .is-layout-flex {
  gap: 0em 0.8em;
  }
  h2.wp-block-heading {
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  font-weight: 600;
  background: transparent;
  }
  p.table-tag {
  margin: 0px;
  font-size: 18px;
  }
  /*   関連記事   */
  .under-entry-content {
  margin: 0px auto;
  width: 90%;
  max-width: 1276px;
  }
  .rect-vertical-card-3 .related-entry-card-wrap {
  width: 24.6%;
  overflow: hidden;
  }
  .rect-vertical-card .related-entry-card-thumb {
  margin-bottom: 17px;
  padding: 20px 0px;
  overflow: hidden;
  }
  .rect-vertical-card .related-entry-card-thumb img {
  scale: 130%;
  }
  .rect-vertical-card .related-entry-card-title {
  margin-bottom: 20px;
  font-size: 21px;
  }
}
/*1300px以上*/
@media screen and (min-width: 1300px){
  .title-wrap h1.entry-title {
  margin-bottom: 80px;
  }
  span.title-line {
  font-size: 57px;
  }
  h2.wp-block-heading,
  p.table-tag {
  font-size: 21px;
  }
  .title-wrap {
  padding: 30px 0px 0px 80px;
  }
  /* 詳細ページからの問い合わせバナー */
  #text-3.widget-above-related-entries {
  margin: 110px 0px 50px;
  }
  #text-3.widget-above-related-entries a.btn-primary {
  padding: 13px 65px;
  }
  /* フッター */
  .foot-area {
  height: 660px;
  }
  .foot-area a.f-logo {
  padding-top: 80px;
  }
  .footer-bottom.fnm-text-width .menu-footer li a {
  font-size: 19px;
  }
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  .header-container {
  display: none;
  }
  .visual-cate {
  height: 300px;
  }
  .visual-cate#post-1,
  .visual-cate#page-387 { /* 抹茶 */
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-matcha-sp.webp");
  }
  .visual-cate#post-7 {
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-greentea-sp.webp");
  }
  .visual-cate#post-9 { /* 茶器 */
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-bowl-sp.webp");
  }
  .visual-cate#post-10 { /* スイーツ */
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-sweets-sp.webp");
  }
  .visual-cate#page-2 { /* 会社案内 */
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-company-sp.webp");
  }
  .visual-cate#page-14,
  .visual-cate#page-205,
  .visual-cate#page-189 { /* 問い合わせ */
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/category-bg-contact-sp.webp");
  }
  #post-1.second-title,
  #post-7.second-title,
  #page-10.second-title,
  #post-387.second-title {
  margin-top: 60px;
  }
  .custom-cat-area { /* スマホでは非表示 */
  display: none;
  }
  /* detail */
  .title-wrap h1.entry-title {
  font-weight: 500;
  }
  .title-wrap {
  text-align: center;
  }
  span.title-line {
  font-size: 25px;
  }
  .eye-catch {
  display: flex;
  justify-content: center;
  width: 100%;
  background: #eee;
  }
  .eye-catch img { /* 画像の切り抜き */
  width: 100%; /* 幅は任意 */
  max-width: 500px;
  height: 350px; /* 切り抜きたい高さを指定 */
  object-fit: cover; /* 画像の比率を保ち、上下がはみ出ると隠れる */
  object-position: center; /* 中央を基準にトリミング（デフォルト） */
  }
  .wp-block-group {
  margin: 0px 10px 8px !important;
  }
  .is-layout-flex {
  gap: 0 0.8rem;
  }
  h2.wp-block-heading {
  margin: 0px 0px 3px 0px;
  padding: 0px;
  font-size: 17px;
  font-weight: 600;
  background: transparent;
  }
  p.table-tag {
  margin: 0px 0px 3px 0px;
  font-size: 17px;
  line-height: 120%;
  }
  /* 詳細ページからの問い合わせバナー */
  #text-3.widget-above-related-entries {
  margin: 10px 0px 30px;
  }
  #text-3.widget-above-related-entries a.btn-primary {
  padding: 13px 55px;
  font-size: 18px;
  font-weight: 500;
  }
  body.single .entry-content {
  margin-bottom: 30px;
  }
  .eye-catch .cat-label {
  padding: 0px 7px;
  font-size: 14px;
  }
  .related-entry-card .cat-label {
  font-size: 12px;
  }
  /* OEM */
  h1.h1-oem {
  margin: 0px 0px 15px;
  max-width: inherit;
  font-size: 35px;
  text-align: center;
  }
  h2.h2-oem {
  padding: 0px 0px 20px;
  font-size: 30px;
  text-align: center;
  }
  h2.h2-oem02 {
  padding: 0px 40px 20px;
  font-size: 35px;
  }
  h2.h2-oem03 {
  padding: 0px 40px 20px;
  font-size: 38px;
  }
  .oem-txt-head {
  padding: 400px 0px 30px;
  width: 100%;
  }
  .oem-txt01 {
  margin-bottom: 10px !important;
  padding: 0px 10%;
  max-width: inherit;
  font-size: 18px;
  line-height: 170%;
  text-align: center;
  }
  .oem-txt02 {
  padding: 0px 10% 20px;
  font-size: 18px;
  line-height: 170%;
  text-align: center;
  }
  .oem-txt03 {
  padding: 30px 13%;
  font-size: 20px;
  line-height: 150%;
  text-align: center;
  }
  .oem-txt04 {
  padding: 0px 10% 20px;
  font-size: 23px;
  line-height: 170%;
  text-align: center;
  }
  .oem-section {
  padding: 50px 0px 50px;
  }
  .oem-img01 {
  margin: 50px auto 30px;
  }
  .oem-img02 {
  margin: 0px auto 30px;
  } 
  /* フッター */
  .navi-footer {
  display: none;
  }
  .foot-area {
  padding-bottom: 40px;
  }
  .foot-area a.f-logo {
  padding-top: 40px;
  width: 35%;
  }
  .foot-area a.f-contact {
  margin-top: 15px;
  padding: 7px 0px;
  width: 60%;
  font-size: 18px;
  font-weight: 500;
  }
  p.f-name,
  p.f-address,
  a.f-tel {
  padding: 15px 0px 8px;
  font-size: 22px;
  }
  p.f-address {
  padding: 0px 20px 10px;
  font-size: 15px;
  line-height: 150%;
 }
  a.f-tel {
  padding: 0px;
  font-size: 17px;
  }
  .copyright span.pc-inline {
  display: none;
  }
  .go-to-top {
  right: 10px;
  bottom: 20px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .archive-title,
  .visual-cate#post-1 .archive-title:before,
  .visual-cate#post-7 .archive-title:before,
  .visual-cate#post-10 .archive-title:before,
  .visual-cate#page-387 .entry-title,
  .visual-cate#page-387 .entry-title:before {
  font-size: 35px;
  }
  .visual-cate#post-1 .archive-title,
  .visual-cate#post-7 .archive-title,
  .visual-cate#post-10 .archive-title,
  .visual-cate#page-387 .entry-title {
  padding-top: 30px;
  }
  .foot-area {
  background-image: url("https://premiumjapanesematcha.com/wp-content/uploads-webpc/uploads/footer-bg-sp.webp");
  }
  /* 問い合わせ */
  .wpcf7 {
  margin-bottom: 0px;
  }
  body.page-id-14 .content-in, body.page-id-205 .content-in, body.page-id-189 .content-in, body.page-id-2 .content-in {
  padding: 30px 0px 30px;
  }
  body.page-id-14 main, body.page-id-205 main, body.page-id-189 main {
  padding: 23px 0px 25px;
  }
  #page-14.second-title, #page-205.second-title, #page-189.second-title, #page-2.second-title {
  padding-bottom: 20px;
  font-size: 35px;
  }
  dl.contactTable {
  margin-top: 0px;
  border: none;
  }
  dl.contactTable div {
  display: block;
  padding: 15px 0px;
  }
  dl.contactTable div:first-child {
  padding: 0px 0px 15px;
  }
  dl.contactTable dt,
  dl.contactTable dd {
  width: 100%;
  font-size: 19px;
  }
  dl.contactTable p {
  width: 100%;
  }
  input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], textarea, select, .search-edit {
  padding: 15px 23px;
  font-size: 18px;
  }
  dl.contactTable .text-area {
  height: 100px;
  }
  .contact-attention {
  margin: -30px 0px 20px;
  font-size: 17px;
  line-height: 130%;
  }
  dl.contactTable dd .chu {
  margin-bottom: 0px;
  font-size: 14px;
  }
  .wpcf7-not-valid-tip { /* エラーメッセージ */
  font-size: 16px;
  }
  /* banner */
  .contactbn input {
  padding: 10px 40px;
  font-size: 25px;
  }
  .recaptcha_bg {
  padding-top: 10px;
  font-size: 14px;
  }
  /* 固定ページｰサンクスページ */
  #post-205 .fz-32px { font-size: 25px; }
  #post-205 .fz-22px { font-size: 18px; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .archive-title,
  .visual-cate#post-1 .archive-title:before,
  .visual-cate#post-7 .archive-title:before,
  .visual-cate#post-10 .archive-title:before,
  .visual-cate#post-1 .archive-title:before,
  .visual-cate#post-7 .archive-title:before,
  .visual-cate#post-10 .archive-title:before,
  .visual-cate#page-387 .entry-title,
  .visual-cate#page-387 .entry-title:before {
  font-size: 27px;
  }
  .visual-cate#post-1 .archive-title,
  .visual-cate#post-7 .archive-title,
  .visual-cate#post-10 .archive-title,
  .visual-cate#page-387 .entry-title {
  padding-top: 24px;
  }
  .visual-cate h1.entry-title {
  font-size: 35px;
  }
  .second-title,
  #post-1.second-title:after,
  #post-7.second-title:after,
  #post-10.second-title:after {
  margin-top: 0px;
  padding-top: 10px;
  font-size: 26px;
  }
  #post-1.second-title,
  #post-7.second-title,
  #post-10.second-title {
  margin-top: 0px;
  padding-top: 35px;
  }
  #post-1.second-title:after,
  #post-7.second-title:after,
  #post-10.second-title:after {
  top: 20px;
  font-size: 24px;
  }
  #post-1.second-title:before,
  #post-7.second-title:before,
  #post-10.second-title:before {
  padding-right: 3px;
  }
  
  .eye-catch img { /* 画像の切り抜き */
  width: 100%; /* 幅は任意 */
  max-width: 500px;
  height: 250px; /* 切り抜きたい高さを指定 */
  }
  span.title-line {
  font-size: 22px;
  }
  /* OEM */
  h1.h1-oem {
  margin: 0px 30px 15px;
  font-size: 30px;
  }
  h2.h2-oem {
  font-size: 25px;
  }
  h2.h2-oem02 {
  padding: 0px 40px 10px;
  font-size: 29px;
  }
  .oem-txt-head {
  padding: 250px 0px 30px;
  width: 100%;
  }
  .oem-txt01,
  .oem-txt02 {
  line-height: 150%;
  }
  .oem-section {
  padding: 35px 0px 20px;
  }
  .oem-fg {
  grid-template-columns: repeat(1, 1fr); /* 4列 */
  row-gap: 25px;
  width: 80%;
  }
  .fg-list img {
  margin: 0px auto 10px;
  width: 70%;
  }
  .fg-list {
  padding: 25px 20px 20px;
  }
  p.fg-ttl {
  font-size: 17px;
  }
  .oem-img01 {
  width: 100%;
  }
  .pagination span.current:first-child::before, .pagination span.current:last-child::before {
  width: 38px;
  height: 34px;
  }
  .pagination {
  margin: 20px 0px 30px;
  }
}