@charset "UTF-8";
/* ============================================================
   阿波晩茶 — style.css
   ------------------------------------------------------------
   1.  ベース／変数
   2.  共通パーツ（ボタン・リンク・見出し）
   3.  ヘッダー／グローバルメニュー／ドロップダウン
   4.  ハンバーガーメニュー（全面メニュー）
   5.  ホーム
   6.  共通コンテンツ（知る／商品／CTA）
   7.  フッター
   8.  下層ページテンプレート
   9.  レスポンシブ（タブレット 768–1080px ／ スマホ 〜767px）
   ============================================================ */

/* ============================================================
   1. ベース／変数
   ============================================================ */
:root{
  --beige:#f6f2ea;
  --ink:#2f2f2f;
  --ink-strong:#231815;
  --line:#2f2f2f;
  --footer-bg:#2f2f2f;
  --footer-link:#dcdddd;
  --footer-sub:#898989;
  --footer-copy:#595757;
  --th-a:#67550e;
  --th-b:#727171;
  --th-c:#484848;
  --th-d:#262626;
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding-top:var(--header-h);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:1.64;
  letter-spacing:1px;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none;}

/* 本文（段落）は 17px / Medium(500)。
   見出し・ラベルとして使っている p は、各クラス側で Bold(700) に戻しています */
p{
  font-size:17px;
  font-weight:500;
}
img{max-width:100%;height:auto;vertical-align:bottom;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
table{border-collapse:collapse;}

/* フォーカス表示 */
a:focus-visible,
button:focus-visible{
  outline:2px solid #67550e;
  outline-offset:3px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:999;
  background:#fff;
  padding:10px 16px;
  font-size:16px;
}
.skip-link:focus{left:0;}

/* レイアウト幅 --------------------------------------------- */
.container{width:min(1280px,100% - 80px);margin-inline:auto;}
.container-mid{width:min(1000px,100% - 80px);margin-inline:auto;}

/* セクション背景 ------------------------------------------- */
.section--tokushima,
.section--nippon{background:var(--beige);}
.section--know,
.section--difference,
.section--cta{background:#fff;}

/* ============================================================
   2. 共通パーツ
   ============================================================ */

/* 屋根アイコン */
.roof img,
.cta__roof img{display:block;width:341px;margin-inline:auto;}

/* テキストリンク（くわしく見る ——） */
.link-arrow{
  display:inline-flex;
  align-items:center;
  font-size:18px;
  line-height:1.64;
  transition:opacity .3s;
}
.link-arrow::after{
  content:"";
  display:block;
  width:37px;
  height:1px;
  margin-left:16px;
  background:var(--line);
  transition:width .25s;
}
.link-arrow:hover{opacity:.6;}
.link-arrow:hover::after{width:52px;}

/* 枠線ボタン */
.btn-wrap{text-align:center;}
.btn{
  position:relative;
  left:-9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:299px;
  min-height:59px;
  padding:8px 56px;
  border:1px solid var(--line);
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  transition:background-color .3s,color .3s;
}
.btn:hover{background:var(--ink);color:#fff;}
.btn::after{
  content:"";
  position:absolute;
  top:50%;
  left:calc(100% - 17px);
  width:36px;
  height:1px;
  background:var(--line);
  transition:width .3s;
}
.btn:hover::after{width:56px;}

/* ============================================================
   3. ヘッダー／グローバルメニュー／ドロップダウン
   ============================================================ */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--header-h);
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  z-index:100;
}
.header__inner{
  display:flex;
  align-items:center;
  height:100%;
  padding:0 29px 0 22px;
}
.header__logo{display:block;flex:none;}
.header__logo img{display:block;width:287px;height:41px;}

.gnav{margin-left:auto;}
.gnav__list{display:flex;align-items:center;gap:30px;}
.gnav__item{position:relative;}
.gnav__link{
  display:flex;
  align-items:center;
  height:var(--header-h);
  font-size:16px;
  line-height:1;
  white-space:nowrap;
  transition:opacity .3s;
}
.gnav__link:hover{opacity:.6;}
.gnav__caret{
  width:10px;
  height:4px;
  margin-left:7px;
  background:currentColor;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .2s;
}
.gnav__item--has-child:hover .gnav__caret,
.gnav__item--has-child:focus-within .gnav__caret{transform:translateY(2px);}

/* ドロップダウン */
.dropdown{
  position:absolute;
  top:58px;
  left:-25px;
  min-width:298px;
  padding:22px 32px 22px 28px;
  background:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.10);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.gnav__item--has-child:hover .dropdown,
.gnav__item--has-child:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:none;
}
.dropdown__link{
  display:flex;
  align-items:center;
  height:38px;
  font-size:16px;
  line-height:1;
  white-space:nowrap;
  transition:opacity .3s;
}
.dropdown__link:hover{opacity:.6;}
.dropdown__bar{
  flex:none;
  width:26px;
  height:1px;
  margin-right:12px;
  background:var(--line);
}

/* ハンバーガーボタン */
.hamburger{
  flex:none;
  margin-left:40px;
  width:44px;
  height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
}
.hamburger__bar{
  display:block;
  width:44px;
  height:1px;
  background:var(--ink-strong);
  transition:transform .3s,opacity .3s;
}

/* ============================================================
   4. ハンバーガーメニュー（全面メニュー）
   ============================================================ */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.3);
  z-index:150;
  opacity:0;
  transition:opacity .35s;
}
.drawer-overlay.is-open{opacity:1;}

.drawer{
  position:fixed;
  top:0;
  right:0;
  width:63.2%;
  height:100%;
  background:var(--beige);
  z-index:200;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drawer.is-open{transform:none;}

.drawer__close{
  position:absolute;
  top:29px;
  right:29px;
  width:45px;
  height:18px;
}
.drawer__close span{
  position:absolute;
  top:50%;
  left:-1px;
  width:47px;
  height:1px;
  background:var(--ink-strong);
}
.drawer__close span:nth-child(1){transform:rotate(22.25deg);}
.drawer__close span:nth-child(2){transform:rotate(-22.25deg);}

.drawer__nav{
  width:max-content;
  max-width:calc(100% - 80px);
  margin-inline:auto;
  padding:120px 0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.drawer__home{margin-bottom:33px;}
.drawer__home a,
.drawer__ttl a,
.drawer__list a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  white-space:nowrap;
  transition:opacity .3s;
}
.drawer__home a:hover,
.drawer__ttl a:hover,
.drawer__list a:hover{opacity:.6;}
.drawer__cols{display:flex;gap:100px;}
.drawer__col{flex:none;width:auto;}
.drawer__group + .drawer__group{margin-top:38px;}
.drawer__list{margin-top:11px;}
.drawer__bar{
  flex:none;
  width:26px;
  height:1px;
  margin-right:12px;
  background:var(--line);
}

body.is-menu-open{overflow:hidden;}

/* ============================================================
   5. ホーム
   ============================================================ */

/* --- メインビジュアル ------------------------------------- */
.hero{
  background:linear-gradient(to bottom,#fff 0 28.72%,var(--beige) 28.72% 100%);
}
.hero__stage{
  position:relative;
  width:100%;
  aspect-ratio:1800/1058;
}
.hero__stage img{display:block;}
.hero__mv1,
.hero__mv2,
.hero__mv3{position:absolute;object-fit:cover;}
.hero__mv1{left:0;top:24.24%;width:59.74%;height:67.77%;}
.hero__mv3{right:0;top:38.59%;width:24.16%;height:30.82%;}
.hero__mv2{left:64.78%;top:73.16%;width:23.17%;height:26.84%;}
.hero__cp{position:absolute;left:65.22%;top:5.10%;width:30.76%;margin:0;}
.hero__sub{position:absolute;left:14.42%;top:18.17%;width:27.35%;}
.hero__cp img,
.hero__sub img{display:block;width:100%;}

/* --- 徳島 ------------------------------------------------- */
.section--tokushima{padding:53px 0 154px;}

.tokushima{display:flex;margin-top:84px;}
.tokushima__media{flex:none;width:40.1%;margin-left:1.8%;}
.tokushima__media img{display:block;width:100%;}
.tokushima__body{flex:none;width:39.5%;margin-left:6.64%;margin-top:76px;}
.tokushima__ttl{font-size:28px;line-height:1.543;}
.tokushima__text{margin-top:33px;}
.tokushima__flow{width:90%;margin:30px 0 0 9.9%;}
.tokushima__flow img{display:block;width:100%;}
.tokushima__flow + .tokushima__text{margin-top:44px;}

/* --- 三つの特徴 ------------------------------------------- */
.features{display:flex;gap:38px;margin-top:115px;}
.feature{flex:1 1 0;min-width:0;}
.feature__num{display:flex;align-items:flex-end;justify-content:center;height:65px;}
.feature__num img{display:block;}
.feature__ttl{display:flex;align-items:flex-end;justify-content:center;height:126px;margin-top:23px;}
.feature__ttl img{display:block;}
.feature__img{margin-top:32px;}
.feature__img img{display:block;width:100%;}
.feature__cap{margin-top:32px;font-size:24px;font-weight:700;line-height:1.417;text-align:center;}
.feature__text{margin-top:19px;}

/* --- 重要無形民俗文化財 ----------------------------------- */
.cultural{margin-top:148px;}
.cultural__ttl img{display:block;width:806px;margin-inline:auto;}
.cultural__panel{
  position:relative;
  width:78.44%;
  margin:48px auto 0;
  overflow:hidden;
}
.cultural__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.cultural__inner{
  position:relative;
  padding:41px 6.47% 55px;
  color:#fff;
}
.cultural__lead{font-size:30px;line-height:1.5;text-align:center;}
.cultural__inner p{margin-top:40px;}
.cultural__inner p + p{margin-top:27px;}
.cultural .btn-wrap{margin-top:87px;}

/* --- 晩茶と番茶 ------------------------------------------- */
.section--difference{padding:117px 0 142px;}
.difference__ttl img{display:block;width:577px;margin-inline:auto;}
.difference{display:flex;margin-top:34px;}
.difference__body{flex:none;width:42%;}
.difference__media{width:52.43%;margin-left:auto;margin-top:83px;}
.difference__media img{display:block;width:100%;}
.difference__lead{font-size:28px;line-height:1.543;}
.difference__lead + p{margin-top:34px;}
.difference__body p + p{margin-top:29px;}
.difference__body .link-arrow{margin-top:43px;}

/* ============================================================
   6. 共通コンテンツ
   ============================================================ */

/* --- 知る ------------------------------------------------- */
.section--know{padding:108px 0 0;}
.know__head{display:flex;}
.know__ttl{flex:none;margin-left:3px;}
.know__ttl img{display:block;width:372px;}
.know__intro{margin-left:105px;margin-top:154px;}
.know__intro-ttl{font-size:28px;line-height:1.543;}
.know__intro p{margin-top:29px;}

.know__cards{display:flex;flex-wrap:wrap;gap:45px 84px;margin-top:111px;}
.know-card{width:calc((100% - 84px) / 2);background:var(--beige);}
.know-card__link{display:block;}
.know-card__media{position:relative;overflow:hidden;}
.know-card__img{
  display:block;
  width:100%;
  aspect-ratio:1197/726;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.know-card__link:hover .know-card__img{transform:scale(1.07);}
.know-card__link:hover .link-arrow{opacity:.6;}
.know-card__link:hover .link-arrow::after{width:52px;}
.know-card__label{position:absolute;display:block;}
.know-card__label--history{left:6.07%;top:10.17%;width:41.49%;}
.know-card__label--method{left:8.36%;top:16.28%;width:20.90%;}
.know-card__label--ferment{left:70.52%;top:23.72%;width:19.97%;}
.know-card__label--taste{left:0;top:10.55%;width:24.85%;}
.know-card__body{padding:36px 43px 40px;}
.know-card__ttl{font-size:24px;line-height:1.417;}
.know-card__text{margin-top:15px;}
.know-card .link-arrow{margin-top:24px;}

/* 下層ページ用（中央寄せ・導入文なし） */
.section--know-center{padding:156px 0 158px;}
.section--know-center .know__head{display:block;}
.section--know-center .know__ttl{margin-left:0;}
.section--know-center .know__ttl img{margin-inline:auto;}
.section--know-center .know__cards{margin-top:53px;}

/* --- 商品セクション --------------------------------------- */
.section--nippon{padding:126px 0 117px;}
.nippon__ttl img{display:block;width:709px;margin-inline:auto;}
.nippon__lead{margin-top:70px;font-size:28px;line-height:1.543;text-align:center;}
.nippon__text{width:54.7%;margin:24px auto 0;}
.nippon__text p + p{margin-top:29px;}
.nippon__lineup-ttl{margin-top:93px;font-size:28px;line-height:1.543;text-align:center;}

.products{display:flex;justify-content:center;gap:9.3%;margin-top:0;}
.product{width:34.375%;}
.product__tag{
  display:block;
  width:fit-content;
  margin:34px auto 0;
  padding:0 18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:20px;
  font-weight:700;
  line-height:52px;
  text-align:center;
}
.product__media{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:460px;
  margin-top:46px;
}
.product__link{
  align-self:stretch;
  display:flex;
  align-items:flex-end;
  transition:opacity .3s;
}
.product__link:hover{opacity:.6;}
.product__link img{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:bottom;
}
.product:nth-child(1) .product__link{width:70.1%;}
.product:nth-child(2) .product__link{width:64.8%;}
.product__ttl{margin-top:37px;font-size:24px;line-height:1.417;}
.product__text{margin-top:15px;}
.product .link-arrow{margin-top:37px;}

/* --- よくある質問／お問い合わせ --------------------------- */
.section--cta{padding:104px 0 131px;}
.cta__cols{display:flex;justify-content:center;gap:9.3%;margin-top:94px;}
.cta__col{width:34.375%;}
.cta__ttl{font-size:28px;line-height:1.543;}
.cta__text{margin-top:21px;}
.cta__col .link-arrow{margin-top:42px;}

/* ページトップへ戻るボタン ---------------------------------- */
.pagetop{
  position:fixed;
  right:30px;
  bottom:30px;
  z-index:120;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .35s,transform .35s,visibility .35s;
}
.pagetop.is-visible{opacity:1;visibility:visible;transform:none;}
.pagetop:hover{opacity:.6;}
.pagetop__arrow{
  display:block;
  width:12px;
  height:12px;
  margin-top:4px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  transform:rotate(-45deg);
}

/* ============================================================
   7. フッター
   ============================================================ */
.footer-gap{height:58px;background:var(--beige);}
.footer{
  background:var(--footer-bg);
  color:var(--footer-link);
  padding:96px 0;
}
.footer__inner{display:flex;}
.footer__brand{flex:none;width:37.7%;}
.footer__brand-ttl{font-size:20px;font-weight:700;line-height:1.6;}
.footer__brand-text{margin-top:20px;font-size:16px;line-height:1.84;color:var(--footer-sub);}
.footer__owner{margin-top:21px;font-size:16px;line-height:1.84;color:var(--footer-sub);}
/* 運営者情報（/aboutus/）へのリンク */
.footer__owner a{transition:opacity .2s;}
.footer__owner a:hover{opacity:.65;}
.footer__logo{margin-top:19px;}
.footer__logo img{display:block;width:113px;}

.footer__nav{display:flex;flex:1;}
.footer__col{width:34.04%;}
.footer__col:nth-child(2){width:33.29%;}
.footer__col:nth-child(3){width:auto;}
.footer__col-ttl{font-size:16px;font-weight:700;line-height:1.84;color:var(--footer-sub);}
.footer__col ul{margin-top:28px;}
.footer__col li + li{margin-top:18px;}
.footer__col a{font-size:16px;line-height:1.84;transition:opacity .2s;}
.footer__col a:hover{opacity:.65;}

.footer__copy{
  margin-top:69px;
  padding-top:33px;
  border-top:1px solid #3e3a39;
  font-size:14px;
  line-height:1.6;
  text-align:center;
  color:var(--footer-copy);
}

/* ============================================================
   8. 下層ページテンプレート
   ============================================================ */
.lower-head{
  position:relative;
  padding:72px 0 193px;
  background:#fff;
  overflow:hidden;
}
.lower-head .container{position:relative;z-index:1;}
.lower-head__roof img{display:block;width:232px;margin-inline:auto;}
.lower-head__ttl{margin-top:25px;font-size:28px;line-height:1.543;text-align:center;}
.lower-head__watermark{
  position:absolute;
  top:102px;
  right:0;
  width:554px;
  z-index:0;
}

.lower-body{background:var(--beige);padding-bottom:206px;}

.lower-main{position:relative;margin-top:-109px;}
.lower-main img{display:block;width:100%;}
img.lower-main__label{
  position:absolute;
  right:2.61%;
  bottom:5.07%;
  width:49.55%;
}

.lower-lead{margin-top:39px;}
.lower-lead p + p{margin-top:29px;}

.lower-sec{margin-top:165px;}
.lower-ttl{
  position:relative;
  padding-bottom:35px;
  font-size:28px;
  line-height:1.543;
}
.lower-ttl::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:72px;
  height:1px;
  background:var(--line);
}
.lower-text{margin-top:29px;}
.lower-ttl + .lower-text{margin-top:51px;}
.lower-deco{margin-top:55px;}
.lower-deco img{display:block;width:57.7%;margin-inline:auto;}
.lower-sec .btn-wrap{margin-top:75px;}

/* 3カラム（1280px幅） */
.lower-cols{display:flex;gap:38px;margin-top:66px;}
.lower-cols .col{flex:1 1 0;min-width:0;}
.col__num{display:flex;align-items:flex-end;justify-content:center;height:65px;}
.col__num img{display:block;}
.col__img{margin-top:18px;}
.col__img img{display:block;width:100%;}
.col__ttl{margin-top:23px;font-size:24px;line-height:1.417;text-align:center;}
.col__text{margin-top:25px;}
.col__text + .col__text{margin-top:27px;}

/* 6カラム（3列×2段）／スマホでは横スワイプ  ※/process/process.php で使用 */
.flow{position:relative;}
.lower-cols--flow{flex-wrap:wrap;row-gap:86px;}
.lower-cols--flow .col{flex:0 0 calc((100% - 76px) / 3);}
.flow-nav{display:none;}

/* 表 */
.table-scroll{margin-top:45px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.lower-ttl + .table-scroll{margin-top:51px;}
.table-scroll + .lower-text{margin-top:33px;}
.tbl{margin-inline:auto;font-size:17px;line-height:1.64;}
.tbl--2col{width:70%;}
.tbl--3col{width:85.8%;}
.tbl th,
.tbl td{
  border:1px solid var(--line);
  padding:17px 12px;
  text-align:center;
  font-weight:700;
}
.tbl thead th{padding:9px 12px;color:#fff;}
.tbl__th-a{background:var(--th-a);}
.tbl__th-b{background:var(--th-b);}
.tbl__th-empty{background:transparent;}
.tbl--2col th,
.tbl--2col td{width:50%;}
.tbl--3col thead td:first-child,
.tbl--3col tbody th{width:18.46%;}
.tbl--3col thead th,
.tbl--3col tbody td{width:40.77%;}

/* 本文＋右画像 */
.lower-media{display:flex;margin-top:51px;}
.lower-media__body{flex:none;width:46%;}
.lower-media__body .lower-text:first-child{margin-top:0;}
.lower-media__img{width:46.2%;margin-left:auto;margin-top:14px;}
.lower-media__img img{display:block;width:100%;}
/* 画像を左・本文を右に置く配置（/process/process.php の「阿波晩茶づくりの流れ」） */
.lower-media--flow .lower-media__img{width:42.3%;margin:0;}
.lower-media--flow .lower-media__body{width:52.1%;margin-left:auto;}

/* 淹れ方ブロック（左＝筆文字＋分量＋イラスト／右＝見出し＋本文）
   ※/taste/index.php で使用 */
.brew-mark{margin-top:35px;}
.brew-mark img{display:block;margin-inline:auto;}
.brew-mark + .brew{margin-top:60px;}
.brew + .brew{margin-top:73px;}
.brew + .brew-mark{margin-top:114px;}
/* 同じグループ内（「温」の急須・ポットとマグカップの間）の短い区切り線 */
.brew-line{
  width:72px;
  height:1px;
  margin:47px auto 0;
  border:0;
  background:var(--line);
}
.brew-line + .brew{margin-top:68px;}

.brew{display:flex;}
/* 左側（筆文字＋分量＋イラスト）は1枚の画像 */
.brew__main{flex:none;width:48%;}
.brew__main img{display:block;width:100%;}

.brew__body{width:46.66%;margin-left:auto;}
.brew__ttl{font-size:24px;line-height:1.417;}
.brew__ttl + .lower-text{margin-top:19px;}

/* よくある質問（＋−で開閉）  ※/faq/index.php で使用 */
.lower-main + .faq-group{margin-top:110px;}
.faq-group + .faq-group{margin-top:115px;}
.faq{margin-top:47px;}
.faq__item + .faq__item{margin-top:53px;}

.faq__q{margin:0;font-size:inherit;line-height:inherit;}
.faq__q-btn{
  display:flex;
  align-items:center;
  width:100%;
  text-align:left;
  transition:opacity .3s;
}
.faq__q-btn:hover{opacity:.6;}
.faq__q-icon{flex:none;width:30px;margin-right:17px;}
.faq__q-icon img{display:block;width:100%;}
.faq__q-ttl{font-size:18px;font-weight:700;line-height:1.4;}

/* ＋−ボタン（開いているときは「−」） */
.faq__toggle{
  position:relative;
  flex:none;
  width:36px;
  height:36px;
  margin-left:auto;
}
.faq__toggle::before,
.faq__toggle::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:1px;
  background:var(--ink);
}
.faq__toggle::after{transform:rotate(90deg);transition:transform .3s,opacity .3s;}
.faq__item.is-open .faq__toggle::after{transform:rotate(0);opacity:0;}

/* 答え（開閉アニメーション） */
.faq__a{
  display:grid;
  grid-template-rows:0fr;
  margin-top:0;
  transition:grid-template-rows .35s ease,margin-top .35s ease;
}
.faq__item.is-open .faq__a{grid-template-rows:1fr;margin-top:20px;}
.faq__a-inner{
  overflow:hidden;
  min-height:0;
  visibility:hidden;
  transition:visibility 0s .35s;
}
.faq__item.is-open .faq__a-inner{visibility:visible;transition:visibility 0s;}
.faq__a-box{display:flex;background:#fff;padding:19px 24px 23px 18px;}
.faq__a-icon{flex:none;width:28px;margin:8px 23px 0 0;}
.faq__a-icon img{display:block;width:100%;}
.faq__a-body{min-width:0;}

/* 横長画像＋筆文字ラベル */
.lower-figure{position:relative;margin-top:57px;}
.lower-figure img{display:block;width:100%;}
img.lower-figure__label{
  position:absolute;
  left:4.34%;
  top:20.5%;
  width:25.61%;
}
.lower-figure + .lower-text{margin-top:40px;}
/* 横幅を抑えて中央に置く図版（例：/about/difference.php の表記比較図） */
.lower-figure--narrow img{width:49.9%;margin-inline:auto;}

/* ============================================================
   9. レスポンシブ
   ============================================================ */

/* ---------- タブレット：768px 〜 1080px ---------- */
@media screen and (max-width:1080px){
  body{font-size:17px;}

  .container,
  .container-mid{width:min(100% - 64px,1000px);}

  /* メニュー：通常メニューは隠してハンバーガーに */
  .gnav{display:none;}
  .header__inner{padding:0 24px;}
  .header__logo img{width:230px;height:auto;}
  .hamburger{margin-left:auto;}
  .drawer{width:78%;}
  .drawer__nav{width:auto;max-width:calc(100% - 64px);padding:110px 0 80px;}
  .drawer__cols{gap:48px;}
  .drawer__col{flex:1 1 0;width:auto;min-width:0;}

  /* ヒーロー */
  .hero__cp{width:34%;left:63%;}
  .hero__sub{width:30%;left:8%;}

  /* 徳島 */
  .section--tokushima{padding-bottom:100px;}
  .tokushima{margin-top:56px;}
  .tokushima__media{width:38%;margin-left:0;}
  .tokushima__body{width:53%;margin-left:5%;margin-top:40px;}
  .tokushima__ttl{font-size:24px;}
  .tokushima__flow{width:88%;margin-left:0;}

  /* 特徴 */
  .features{gap:24px;margin-top:80px;}
  /* 一・二・三 は字幅をそろえる（高さを揃えると「一」だけ大きく見えるため） */
  .feature__num{height:58px;}
  .feature__num img{width:80px;height:auto;max-height:none;}
  .feature__ttl{height:92px;margin-top:16px;}
  .feature__ttl img{max-height:100%;width:auto;}
  .feature__cap{font-size:20px;margin-top:24px;}

  /* 文化財 */
  .cultural{margin-top:100px;}
  .cultural__ttl img{width:min(100%,700px);}
  .cultural__panel{width:100%;margin-top:36px;}
  .cultural__inner{padding:36px 40px 40px;}
  .cultural__lead{font-size:24px;}
  .cultural__inner p{margin-top:24px;}
  .cultural .btn-wrap{margin-top:56px;}

  /* 知る */
  .section--know{padding-top:80px;}
  .know__head{display:block;}
  .know__ttl{margin-left:0;}
  .know__ttl img{width:260px;}
  .know__intro{margin:32px 0 0;}
  .know__intro-ttl{font-size:24px;}
  .know__cards{gap:32px 40px;margin-top:64px;}
  .know-card{width:calc((100% - 40px) / 2);}
  .know-card__body{padding:28px 28px 32px;}
  .know-card__ttl{font-size:20px;}
  .section--know-center{padding:80px 0 90px;}
  .section--know-center .know__cards{margin-top:40px;}

  /* 晩茶と番茶 */
  .section--difference{padding:90px 0 90px;}
  .difference__ttl img{width:min(100%,460px);}
  .difference{display:block;margin-top:32px;}
  .difference__body{width:100%;}
  .difference__media{width:100%;margin-top:40px;}
  .difference__lead{font-size:24px;}

  /* 商品 */
  .section--nippon{padding:90px 0 90px;}
  .nippon__ttl img{width:min(100%,540px);}
  .nippon__lead{margin-top:56px;font-size:24px;}
  .nippon__text{width:100%;margin-top:24px;}
  .nippon__lineup-ttl{margin-top:72px;font-size:24px;}
  .products{gap:6%;}
  .product{width:47%;}
  .product__media{margin-top:32px;}
  .product__ttl{margin-top:28px;font-size:20px;}
  .product .link-arrow{margin-top:28px;}

  /* CTA */
  .section--cta{padding:80px 0 90px;}
  .cta__cols{gap:6%;margin-top:56px;}
  .cta__col{width:47%;}
  .cta__ttl{font-size:24px;}

  .pagetop{right:20px;bottom:20px;width:52px;height:52px;}

  /* フッター */
  .footer{padding:64px 0;}
  .footer__inner{display:block;}
  .footer__brand{width:100%;}
  .footer__nav{margin-top:48px;gap:32px;}
  .footer__col,
  .footer__col:nth-child(2),
  .footer__col:nth-child(3){width:auto;flex:1 1 0;}
  .footer__copy{margin-top:48px;padding-top:24px;}

  /* 下層ページ */
  .lower-head{padding:56px 0 120px;}
  .lower-head__watermark{width:360px;top:80px;}
  .lower-body{padding-bottom:120px;}
  .lower-main{margin-top:-70px;}
  .lower-sec{margin-top:100px;}
  .lower-ttl{font-size:24px;padding-bottom:28px;}
  .lower-ttl + .lower-text{margin-top:36px;}
  .lower-cols{gap:24px;margin-top:48px;}
  .col__num{height:58px;}
  .col__num img{width:80px;height:auto;max-height:none;}
  .col__ttl{font-size:20px;}
  .lower-media{display:block;margin-top:36px;}
  .lower-media__body{width:100%;}
  .lower-media__img{width:100%;margin-top:32px;}
  .lower-media--flow .lower-media__img{width:100%;max-width:423px;margin:0 auto 32px;}
  .lower-media--flow .lower-media__body{width:100%;margin-left:0;}
  .lower-cols--flow{row-gap:56px;}
  .lower-cols--flow .col{flex:0 0 calc((100% - 48px) / 3);}
  /* 淹れ方 */
  .brew-mark{margin-top:28px;}
  .brew-mark img{width:96px;height:auto;}
  .brew-mark + .brew{margin-top:44px;}
  .brew + .brew{margin-top:56px;}
  .brew + .brew-mark{margin-top:88px;}
  .brew-line{margin-top:36px;}
  .brew-line + .brew{margin-top:52px;}
  .brew__ttl{font-size:20px;}
  /* よくある質問 */
  .lower-main + .faq-group{margin-top:72px;}
  .faq-group + .faq-group{margin-top:80px;}
  .faq{margin-top:36px;}
  .faq__item + .faq__item{margin-top:40px;}
  .faq__q-icon{width:26px;margin-right:14px;}
  .faq__q-ttl{font-size:17px;}
  .faq__toggle{width:30px;height:30px;}
  .faq__item.is-open .faq__a{margin-top:16px;}
  .faq__a-box{padding:18px 20px 20px 16px;}
  .faq__a-icon{width:25px;margin:6px 18px 0 0;}
  .tbl--2col,
  .tbl--3col{width:100%;min-width:640px;}
  .lower-sec .btn-wrap{margin-top:56px;}
}

/* ---------- スマートフォン：〜767px ---------- */
@media screen and (max-width:767px){
  :root{--header-h:76px;}

  body{font-size:16px;line-height:1.8;}

  /* 本文（段落）はスマホのみ 16px */
  p{font-size:16px;}

  .container,
  .container-mid{width:calc(100% - 40px);}

  /* SPはヘッダー背景なし。スクロール後はロゴを隠し、三本線だけを固定表示 */
  .header{
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .header__inner{padding:0 16px;}
  .header__logo img{width:min(238px,49.6vw);height:auto;}
  .header__logo{transition:opacity .3s,visibility .3s;}
  .header.is-scrolled .header__logo{opacity:0;visibility:hidden;}
  .hamburger{width:min(44px,9.17vw);height:44px;gap:7px;}
  .hamburger__bar{width:min(44px,9.17vw);}

  .drawer{width:100%;}
  .drawer__close{top:22px;right:18px;}
  .drawer__nav{max-width:calc(100% - 40px);padding:90px 0 60px;}
  .drawer__cols{display:block;}
  .drawer__col + .drawer__col{margin-top:32px;}
  .drawer__home a,
  .drawer__ttl a,
  .drawer__list a{font-size:16px;min-height:44px;}

  .link-arrow{font-size:16px;}
  /* 枠線ボタンはPCと同じ見た目（幅が足りないときだけ縮む） */
  .btn{
    left:-9px;
    min-width:min(299px,100%);
    max-width:100%;
    padding:8px 24px;
    font-size:18px;
  }

  .roof img,
  .cta__roof img{width:200px;}

  /* ヒーロー：SPデザイン（幅480px基準）にあわせた重ね組み
     ヘッダーは背景なしで重なるため、body の padding-top を打ち消しています */
  .hero{background:transparent;margin-top:calc(var(--header-h) * -1);}
  .hero__stage{
    aspect-ratio:480 / 980;
    background:linear-gradient(to bottom,#fff 0 21.74%,var(--beige) 21.74% 100%);
  }
  .hero__cp{left:35.63%;top:9.80%;width:59.79%;}
  .hero__mv1{left:0;right:auto;top:36.43%;width:87.50%;height:28.57%;}
  .hero__mv3{left:auto;right:0;top:67.76%;width:51.04%;height:18.88%;}
  .hero__mv2{left:0;top:77.96%;width:43.13%;height:14.29%;}
  .hero__sub{left:8.54%;top:96.53%;width:83.13%;}

  /* 徳島（数値は幅480pxのSPデザインを vw に換算） */
  .roof img,
  .cta__roof img{width:45.2vw;}
  .section--tokushima{padding-top:19.4vw;padding-bottom:64px;}
  .tokushima{display:block;margin-top:11.9vw;}
  .tokushima__media{width:81.67vw;margin:0 0 0 calc(6.46vw - 20px);}
  .tokushima__body{width:100%;margin:7vw 0 0;}
  .tokushima__ttl{font-size:20px;line-height:1.6;}
  .tokushima__text{margin-top:24px;}
  .tokushima__flow{width:100%;margin:32px 0 0;}
  .tokushima__flow + .tokushima__text{margin-top:32px;}

  /* 特徴 */
  .features{display:block;margin-top:64px;}
  .feature + .feature{margin-top:56px;}
  .feature__num{height:49px;}
  .feature__num img{width:67px;}
  .feature__ttl{height:76px;margin-top:12px;}
  .feature__img{margin-top:20px;}
  .feature__cap{font-size:21px;margin-top:20px;}
  .feature__text{margin-top:14px;}

  /* 文化財 */
  .cultural{margin-top:64px;}
  .cultural__panel{margin-top:24px;}
  .cultural__inner{padding:28px 20px 32px;}
  .cultural__lead{font-size:20px;}
  .cultural__inner p{margin-top:18px;}
  .cultural__inner p + p{margin-top:18px;}
  .cultural .btn-wrap{margin-top:40px;}

  /* 知る */
  .section--know{padding-top:56px;}
  .know__ttl img{width:180px;margin-inline:auto;}
  .know__intro-ttl{font-size:20px;}
  .know__cards{display:block;margin-top:40px;}
  .know-card{width:100%;}
  .know-card + .know-card{margin-top:32px;}
  .know-card__body{padding:24px 20px 28px;}
  .know-card__ttl{font-size:20px;}
  .section--know-center{padding:56px 0 64px;}
  .section--know-center .know__cards{margin-top:32px;}

  /* 晩茶と番茶 */
  .section--difference{padding:64px 0 64px;}
  /* 茶葉の写真は「晩茶と番茶」の筆文字のすぐ下に置く */
  .difference{display:flex;flex-direction:column;margin-top:24px;}
  .difference__media{order:-1;width:100%;margin:0 0 32px;}
  .difference__body{width:100%;}
  .difference__lead{font-size:20px;}
  .difference__lead + p{margin-top:20px;}

  /* 商品 */
  .section--nippon{padding:64px 0;}
  .nippon__lead{margin-top:32px;font-size:20px;}
  .nippon__text{margin-top:20px;}
  .nippon__lineup-ttl{margin-top:56px;font-size:20px;}
  .products{display:block;}
  .product{width:100%;}
  .product + .product{margin-top:56px;}
  .product__tag{font-size:16px;line-height:44px;}
  .product__media{height:380px;margin-top:24px;}
  .product__ttl{margin-top:20px;font-size:18px;}
  .product .link-arrow{margin-top:20px;}

  /* CTA */
  .section--cta{padding:56px 0 64px;}
  .cta__cols{display:block;margin-top:36px;}
  .cta__col{width:100%;}
  .cta__col + .cta__col{margin-top:40px;}
  .cta__ttl{font-size:20px;}
  .cta__text{margin-top:14px;}
  .cta__col .link-arrow{margin-top:24px;}

  /* PC専用の改行はスマホでは解除 */
  br.br-pc{display:none;}

  .pagetop{right:14px;bottom:14px;width:46px;height:46px;}

  /* フッター */
  .footer-gap{height:32px;}
  .footer{padding:48px 0;}
  .footer__nav{display:block;margin-top:36px;}
  .footer__col + .footer__col{margin-top:28px;}
  .footer__copy{margin-top:36px;padding-top:20px;}

  /* 下層ページ */
  .lower-head{padding:40px 0 80px;}
  .lower-head__roof img{width:180px;}
  .lower-head__ttl{font-size:20px;margin-top:18px;}
  .lower-head__watermark{width:240px;top:60px;}
  .lower-body{padding-bottom:72px;}
  .lower-main{margin-top:-40px;}
  .lower-lead{margin-top:24px;}
  .lower-lead p + p{margin-top:20px;}
  .lower-sec{margin-top:80px;}
  .lower-ttl{font-size:20px;padding-bottom:20px;}
  .lower-ttl + .lower-text{margin-top:24px;}
  .lower-text{margin-top:20px;}
  .lower-deco{margin-top:32px;}
  .lower-deco img{width:80%;}
  .lower-cols{display:block;margin-top:32px;}
  .lower-cols .col + .col{margin-top:40px;}

  /* ---- 「阿波晩茶づくりの流れ」：スマホのみ横スワイプ ----
     ・トラックは画面いっぱい（フルブリード）に広げ、左右に前後のカードを覗かせます
     ・スワイプは CSS の scroll-snap（ブラウザ標準）で動きます
     ・前後ボタンとドットは main.js から制御しています */
  .lower-cols--flow{
    display:flex;
    flex-wrap:nowrap;
    gap:5vw;            /* デザイン（幅480px）の24pxを画面幅比で換算 */
    row-gap:0;
    width:100vw;
    margin-inline:calc(50% - 50vw);
    padding-inline:9.9vw;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .lower-cols--flow::-webkit-scrollbar{display:none;}
  .lower-cols--flow .col{
    flex:0 0 80.2vw;
    scroll-snap-align:center;
  }
  .lower-cols--flow .col + .col{margin-top:0;}

  .flow-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:40px;
  }
  .flow-nav__arrow{
    flex:none;
    display:block;
    color:var(--ink);
    transition:opacity .3s;
  }
  .flow-nav__arrow svg{display:block;}
  .flow-nav__arrow:hover{opacity:.6;}
  .flow-nav__arrow[disabled]{opacity:.25;cursor:default;}
  .flow-nav__dots{display:flex;align-items:center;gap:9px;}
  .flow-nav__dot{
    position:relative;
    display:block;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--footer-sub);
    transition:background-color .3s;
  }
  /* 見た目は15pxのまま、指で押しやすいようにタップ領域だけ広げています */
  .flow-nav__dot::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px;}
  .flow-nav__dot.is-current{background:var(--ink);}
  .col__num{height:49px;}
  .col__num img{width:67px;}
  .col__ttl{font-size:24px;margin:24px 0;}
  .col__text{margin-top:14px;}
  .table-scroll,
  .lower-ttl + .table-scroll{margin-top:24px;}
  .tbl{font-size:15px;}
  .tbl th,
  .tbl td{padding:12px 8px;}
  .tbl--2col,
  .tbl--3col{min-width:560px;}
  /* PCで右に置いている画像は、スマホでは見出しのすぐ下に表示する */
  .lower-media{display:flex;flex-direction:column;margin-top:24px;}
  .lower-media__img{order:-1;width:100%;margin:0 0 24px;}
  .lower-media__body{width:100%;}
  .lower-figure{margin-top:24px;}
  .lower-figure + .lower-text{margin-top:24px;}
  .lower-figure--narrow img{width:86%;}

  /* 淹れ方：スマホは縦積み（左の説明→右の本文の順） */
  .brew-mark{margin-top:24px;}
  .brew-mark img{width:90px;}
  .brew-mark + .brew{margin-top:32px;}
  .brew + .brew{margin-top:56px;}
  .brew + .brew-mark{margin-top:56px;}
  .brew-line{width:60px;margin-top:28px;}
  .brew-line + .brew{margin-top:36px;}
  .brew{display:block;}

  /* よくある質問 */
  .lower-main + .faq-group{margin-top:48px;}
  .faq-group + .faq-group{margin-top:56px;}
  .faq{margin-top:24px;}
  .faq__item + .faq__item{margin-top:28px;}
  .faq__q-btn{align-items:flex-start;}
  .faq__q-icon{width:22px;margin:2px 12px 0 0;}
  .faq__q-ttl{font-size:16px;line-height:1.5;padding-right:14px;}
  .faq__toggle{width:22px;height:22px;margin-top:2px;}
  .faq__item.is-open .faq__a{margin-top:12px;}
  .faq__a-box{padding:16px 16px 18px 14px;}
  .faq__a-icon{width:21px;margin:4px 12px 0 0;}
  .brew__main{width:100%;}
  .brew__body{width:100%;margin:28px 0 0;}
  .brew__ttl{font-size:18px;}
  .brew__ttl + .lower-text{margin-top:14px;}
  .lower-sec .btn-wrap{margin-top:36px;}
}

/* 表がはみ出すときのスクロール可視化 */
.table-scroll{scrollbar-width:thin;}

/* アニメーションを減らす設定への配慮 */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .lower-cols--flow{scroll-behavior:auto;}
}

/* ============================================================
   10. 商品ページ（/awabancha/）
   ------------------------------------------------------------
   このセクションは /awabancha/index.php だけで使っています。
   クラス名はすべて "pd-" で始めており、他ページには影響しません。

   ・帯（.pd-band）を縦に積む構成です。帯ごとに背景色を切り替え、
     幅は .pd-wide（1280px）／.pd-narrow（1000px）で決めます。
   ・見出しやキャッチの一部は縦書き（writing-mode）です。
     スマホでは横書きに戻します。
   ============================================================ */

/* --- 幅と帯 ----------------------------------------------- */
.pd-body{background:var(--beige);}
.pd-band{position:relative;}
.pd-band--white{background:#fff;}
.pd-wide{width:min(1280px,100% - 80px);margin-inline:auto;}
.pd-narrow{width:min(1000px,100% - 80px);margin-inline:auto;}

/* 帯ごとの上下余白 */
.pd-band--lead{padding:104px 0 0;}
.pd-band--intro{padding:150px 0 160px;}
.pd-band--quote{padding:112px 0;}
.pd-band--back{padding:0 0 150px;}
.pd-band--policy{padding:150px 0 160px;}
.pd-band--item{padding:150px 0 0;}
.pd-band--taste{padding:150px 0 0;}
.pd-band--soon{padding:150px 0 0;}
.pd-band--buy{padding:150px 0 190px;}

/* --- 共通の見出し ----------------------------------------- */
/* 通し番号（01 / 02 …） */
.pd-num{
  display:block;
  font-size:15px;
  font-weight:700;
  letter-spacing:.34em;
  color:var(--th-b);
}
.pd-ttl{
  position:relative;
  margin-top:22px;
  padding-bottom:34px;
  font-size:clamp(26px,2.5vw,34px);
  line-height:1.5;
}
.pd-ttl::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:72px;
  height:1px;
  background:var(--line);
}
.pd-ttl--plain{padding-bottom:0;}
.pd-ttl--plain::after{display:none;}
.pd-text{margin-top:29px;}
.pd-text:first-child{margin-top:0;}
.pd-lead{width:min(760px,100%);}
/* 導入文（ファーストビューのリード）— 本文より少し大きめ・中央寄せ */
.pd-lead-text{
  width:min(820px,100%);
  margin-inline:auto;
  font-size:19px;
  line-height:1.95;
  text-align:center;
}
.pd-lead-text + .pd-lead-text{margin-top:28px;}
.pd-note{margin-top:22px;font-size:15px;line-height:1.73;color:var(--th-b);}
.pd-note--center{text-align:center;}

/* --- メインビジュアル ------------------------------------- */
/* 上76%が白、下24%がベージュ。商品画像が境目にまたがって立つ形です */
.pd-fv{
  position:relative;
  padding-top:66px;
  background:linear-gradient(to bottom,#fff 0,#fff 76%,var(--beige) 76%,var(--beige) 100%);
  overflow:hidden;
}
/* 背景の筆文字（この上には何も重ねません） */
.pd-fv__watermark{
  position:absolute;
  top:92px;
  right:5%;
  width:min(36vw,500px);
  z-index:0;
}
.pd-fv__inner{
  position:relative;
  z-index:1;
  width:min(1280px,100% - 80px);
  margin-inline:auto;
}
.pd-fv__roof img{display:block;width:232px;margin-inline:auto;}

.pd-fv__stage{
  display:flex;
  align-items:flex-end;
  margin-top:14px;
  padding-bottom:78px;
}
/* 商品画像は左に少しはみ出させます */
.pd-fv__media{flex:none;width:41%;margin-left:-4.5%;}
.pd-fv__media img{display:block;width:100%;}

/* キャッチは縦書き。右から「タイトル → リード → 産地表記」の順に並びます */
.pd-fv__text{
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  gap:38px;
  margin:0 0 96px auto;
}
.pd-fv__ttl{
  writing-mode:vertical-rl;
  font-size:clamp(38px,3.9vw,58px);
  font-weight:700;
  line-height:1.42;
  letter-spacing:.14em;
}
.pd-fv__lead{
  writing-mode:vertical-rl;
  margin-top:14px;
  font-size:18px;
  font-weight:500;
  line-height:2.1;
  letter-spacing:.12em;
}
.pd-fv__place{
  writing-mode:vertical-rl;
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  line-height:2;
  letter-spacing:.34em;
  color:var(--th-b);
}
/* 商品名のラベル（ベージュ側に置きます） */
.pd-fv__tag{
  position:relative;
  z-index:1;
  display:block;
  width:fit-content;
  margin:0 auto 0 4%;
  padding:0 22px 56px;
  font-size:17px;
  font-weight:700;
  line-height:52px;
  letter-spacing:.16em;
  text-align:center;
}
.pd-fv__tag span{
  display:block;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:0 22px;
}

/* --- 左に見出し／右に本文（非対称2カラム） ---------------- */
.pd-two{display:flex;gap:8.6%;}
.pd-two__head{
  position:sticky;
  top:calc(var(--header-h) + 48px);
  align-self:flex-start;
  flex:none;
  width:31%;
}
.pd-two__body{flex:1;min-width:0;max-width:620px;}

/* --- 引用（全幅の白帯・大きめ） --------------------------- */
.pd-quote{
  text-align:center;
  font-size:clamp(22px,2.5vw,36px);
  font-weight:700;
  line-height:1.95;
  letter-spacing:.04em;
}
.pd-quote__rule{
  width:1px;
  height:72px;
  margin:0 auto 46px;
  background:var(--line);
}
.pd-quote__by{margin-top:40px;font-size:15px;letter-spacing:.3em;color:var(--th-b);text-align:center;}

/* --- 全幅写真＋重なる白ボックス --------------------------- */
.pd-overlap__img{
  display:block;
  width:100%;
  height:min(52vw,560px);
  object-fit:cover;
}
.pd-overlap__box{
  position:relative;
  width:min(760px,88%);
  margin:-118px 0 0 auto;
  background:#fff;
  padding:56px 60px 60px;
}
.pd-overlap__box .pd-ttl{margin-top:20px;}

/* --- 4項目のカード --------------------------------------- */
.pd-factors{display:flex;gap:2.6%;margin-top:74px;}
.pd-factor{flex:1 1 0;min-width:0;background:#fff;padding:40px 30px 44px;}
.pd-band--white .pd-factor{background:var(--beige);}
.pd-factor__num{display:flex;align-items:flex-end;height:52px;}
.pd-factor__num img{display:block;width:54px;}
.pd-factor__ttl{margin-top:22px;font-size:18px;font-weight:700;line-height:1.5;}
.pd-factor__text{margin-top:16px;font-size:15px;line-height:1.73;}

/* --- 写真と本文を左右交互に並べる ------------------------- */
.pd-row{display:flex;align-items:center;gap:6.4%;}
.pd-row + .pd-row{margin-top:118px;}
.pd-row:nth-child(even){flex-direction:row-reverse;}
.pd-row__media{flex:none;width:52%;}
.pd-row__media img{display:block;width:100%;}
.pd-row__body{flex:1;min-width:0;}
.pd-row__ttl{margin-top:20px;font-size:clamp(22px,2vw,26px);line-height:1.45;}
.pd-row__text{margin-top:26px;}

/* --- 商品（左＝パッケージ／右＝本文と仕様） --------------- */
.pd-item{display:flex;align-items:center;gap:7%;}
.pd-item__media{flex:none;width:29%;}
.pd-item__media img{display:block;width:100%;}
.pd-item__body{flex:1;min-width:0;}
.pd-item__tag{
  display:inline-block;
  padding:0 18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:16px;
  font-weight:700;
  line-height:44px;
  letter-spacing:.12em;
}
.pd-item__ttl{margin-top:24px;font-size:clamp(26px,2.5vw,34px);line-height:1.45;}
.pd-item__ttl + .pd-text{margin-top:28px;}

/* 商品仕様の表 */
.pd-spec-ttl{margin-top:52px;font-size:18px;font-weight:700;letter-spacing:.16em;}
.pd-spec{width:100%;margin-top:20px;font-size:17px;line-height:1.64;}
.pd-spec th,
.pd-spec td{border:1px solid var(--line);padding:15px 22px;font-weight:700;text-align:left;}
.pd-spec th{width:28%;background:var(--th-a);color:#fff;white-space:nowrap;}
.pd-spec td{background:#fff;}
/* 商品仕様のすぐ下に置く購入導線 */
.pd-item__btn{margin-top:46px;text-align:left;}
.pd-band--white .pd-spec td{background:transparent;}

/* --- 白い囲みブロック（まるごと阿波晩茶） ----------------- */
.pd-panel{
  display:flex;
  align-items:center;
  gap:56px;
  margin-top:51px;
  background:#fff;
  padding:52px 60px 56px;
}
.pd-panel__media{flex:none;width:19%;}
.pd-panel__media img{display:block;width:100%;}
.pd-panel__body{min-width:0;}
.pd-panel__tag{
  display:inline-block;
  padding:0 16px;
  border-top:1px solid var(--th-b);
  border-bottom:1px solid var(--th-b);
  color:var(--th-b);
  font-size:15px;
  font-weight:700;
  line-height:36px;
  letter-spacing:.12em;
}
.pd-panel__ttl{margin-top:20px;font-size:24px;line-height:1.417;}

/* --- ご購入について（中央寄せ・大きめボタン） ------------- */
.pd-buy{text-align:center;}
.pd-buy__roof img{display:block;width:232px;margin-inline:auto;}
.pd-buy__ttl{margin-top:26px;font-size:clamp(26px,2.5vw,34px);line-height:1.5;}
.pd-buy__text{width:min(700px,100%);margin:30px auto 0;}
.pd-buy .btn-wrap{margin-top:52px;}
.btn--lg{min-width:392px;min-height:76px;font-size:20px;letter-spacing:.1em;}

/* --- 中央寄せの本文（味わい） ----------------------------- */
.pd-center{text-align:center;}
.pd-center .pd-ttl{padding-bottom:0;}
.pd-center .pd-ttl::after{left:50%;transform:translateX(-50%);display:block;bottom:-34px;}
.pd-center .pd-ttl{margin-bottom:34px;}
.pd-center .pd-text{width:min(760px,100%);margin-inline:auto;}
.pd-center .btn-wrap{margin-top:62px;}

/* ============================================================
   10-2. 商品ページ：タブレット（768–1080px）
   ============================================================ */
@media screen and (max-width:1080px){
  .pd-wide,
  .pd-narrow{width:min(100% - 64px,1000px);}

  .pd-band--lead{padding:72px 0 0;}
  .pd-band--intro{padding:100px 0 110px;}
  .pd-band--quote{padding:80px 0;}
  .pd-band--back{padding:0 0 100px;}
  .pd-band--policy{padding:100px 0 110px;}
  .pd-band--item,
  .pd-band--taste,
  .pd-band--soon{padding-top:100px;}
  .pd-band--buy{padding:100px 0 120px;}

  .pd-ttl{margin-top:18px;padding-bottom:28px;}
  .pd-text{margin-top:24px;}

  .pd-fv{padding-top:48px;}
  .pd-fv__watermark{top:64px;width:min(48vw,420px);}
  .pd-fv__roof img{width:190px;}
  .pd-fv__stage{padding-bottom:56px;}
  .pd-fv__media{width:44%;margin-left:-4%;}
  .pd-fv__text{gap:28px;margin-bottom:64px;}
  .pd-fv__lead{font-size:17px;line-height:2;}
  .pd-fv__tag{padding-bottom:44px;font-size:16px;line-height:46px;}

  .pd-two{display:block;}
  .pd-two__head{position:static;width:100%;}
  .pd-two__body{max-width:none;margin-top:36px;}

  .pd-lead-text{font-size:18px;line-height:1.9;}
  .pd-lead-text + .pd-lead-text{margin-top:24px;}
  .pd-item__btn{margin-top:36px;text-align:center;}
  .pd-quote__rule{height:56px;margin-bottom:34px;}

  .pd-overlap__img{height:min(58vw,420px);}
  .pd-overlap__box{width:100%;margin:-72px 0 0;padding:40px 36px 44px;}

  .pd-factors{flex-wrap:wrap;gap:20px;margin-top:48px;}
  .pd-factor{flex:1 1 calc((100% - 20px) / 2);padding:30px 26px 32px;}

  .pd-row{gap:5%;}
  .pd-row + .pd-row{margin-top:76px;}
  .pd-row__media{width:50%;}
  .pd-row__text{margin-top:22px;}

  .pd-item{gap:5%;}
  .pd-item__media{width:26%;}
  .pd-item__ttl{margin-top:20px;}
  .pd-spec-ttl{margin-top:40px;}
  .pd-spec{min-width:520px;}

  .pd-panel{gap:36px;margin-top:40px;padding:40px 36px 44px;}
  .pd-panel__media{width:24%;}
  .pd-panel__ttl{font-size:20px;}

  .pd-buy__roof img{width:190px;}
  .pd-buy .btn-wrap{margin-top:40px;}
  .btn--lg{min-width:320px;min-height:66px;font-size:18px;}

  .pd-center .btn-wrap{margin-top:48px;}
}

/* ============================================================
   10-3. 商品ページ：スマートフォン（〜767px）
   ------------------------------------------------------------
   縦書きは横書きに戻し、左右の組みはすべて縦積みにします。
   ============================================================ */
@media screen and (max-width:767px){
  .pd-wide,
  .pd-narrow{width:calc(100% - 40px);}

  .pd-band--lead{padding:52px 0 0;}
  .pd-band--intro{padding:72px 0 76px;}
  .pd-band--quote{padding:56px 0;}
  .pd-band--back{padding:0 0 72px;}
  .pd-band--policy{padding:72px 0 76px;}
  .pd-band--item,
  .pd-band--taste,
  .pd-band--soon{padding-top:72px;}
  .pd-band--buy{padding:72px 0 80px;}

  .pd-num{font-size:13px;}
  .pd-ttl{margin-top:14px;padding-bottom:20px;font-size:20px;}
  .pd-text{margin-top:20px;}
  .pd-note{margin-top:18px;font-size:14px;}

  /* メインビジュアル：筆文字を上、商品画像を下に */
  .pd-fv{
    padding-top:32px;
    background:linear-gradient(to bottom,#fff 0,#fff 78%,var(--beige) 78%,var(--beige) 100%);
  }
  .pd-fv__watermark{top:34px;right:-8%;width:62vw;}
  .pd-fv__roof img{width:150px;}
  /* スマホは「キャッチ → 商品画像」の順に並べ替えます（DOM順は逆） */
  .pd-fv__stage{
    display:flex;
    flex-direction:column-reverse;
    margin-top:18px;
    padding-bottom:30px;
  }
  .pd-fv__text{
    display:block;
    margin:0;
    text-align:center;
  }
  .pd-fv__ttl,
  .pd-fv__lead,
  .pd-fv__place{writing-mode:horizontal-tb;}
  .pd-fv__ttl{font-size:26px;line-height:1.5;letter-spacing:.08em;}
  .pd-fv__lead{margin-top:18px;font-size:16px;line-height:1.9;letter-spacing:.04em;}
  .pd-fv__place{margin-top:14px;font-size:12px;letter-spacing:.24em;}
  .pd-fv__media{width:80%;margin:24px auto 0;}
  .pd-fv__tag{padding-bottom:34px;font-size:14px;line-height:40px;}
  .pd-fv__tag span{padding:0 16px;}

  .pd-two__body{margin-top:24px;}

  /* 導入文の中央寄せは3行以上だと読みにくいので、スマホでは左揃えに */
  .pd-lead-text{font-size:16px;line-height:1.85;text-align:left;}
  .pd-lead-text + .pd-lead-text{margin-top:20px;}
  .pd-item__btn{margin-top:28px;text-align:center;}
  .pd-quote{font-size:19px;line-height:1.85;}
  .pd-quote__rule{height:44px;margin-bottom:26px;}
  .pd-quote__by{margin-top:26px;font-size:13px;}

  .pd-overlap__img{height:56vw;}
  .pd-overlap__box{margin:-40px 0 0;padding:28px 22px 30px;}
  .pd-overlap__box .pd-ttl{margin-top:12px;}

  .pd-factors{display:block;margin-top:32px;}
  .pd-factor + .pd-factor{margin-top:16px;}
  .pd-factor{padding:24px 20px 26px;}
  .pd-factor__num{height:40px;}
  .pd-factor__num img{width:44px;}
  .pd-factor__ttl{margin-top:16px;font-size:17px;}

  .pd-row{display:block;}
  .pd-row + .pd-row{margin-top:56px;}
  .pd-row__media{width:100%;}
  .pd-row__body{margin-top:24px;}
  .pd-row__ttl{margin-top:14px;font-size:19px;}
  .pd-row__text{margin-top:18px;}

  .pd-item{display:block;}
  .pd-item__media{width:62%;margin:0 auto 28px;}
  .pd-item__tag{font-size:14px;line-height:38px;}
  .pd-item__ttl{margin-top:18px;font-size:20px;}
  .pd-spec-ttl{margin-top:34px;font-size:16px;}
  /* スマホでは横スクロールさせず、画面幅に収めます */
  .pd-spec{font-size:15px;min-width:0;}
  .pd-spec th{width:34%;white-space:normal;}
  .pd-spec th,
  .pd-spec td{padding:12px 14px;}

  .pd-panel{display:block;margin-top:28px;padding:28px 22px 32px;}
  .pd-panel__media{width:54%;margin:0 auto 24px;}
  .pd-panel__tag{font-size:14px;line-height:32px;}
  .pd-panel__ttl{margin-top:16px;font-size:18px;}

  .pd-buy__roof img{width:150px;}
  .pd-buy__ttl{margin-top:18px;font-size:20px;}
  /* 本文の中央寄せは読みにくいので、スマホでは左揃えに戻します */
  .pd-buy__text{margin-top:20px;text-align:left;}
  .pd-buy .btn-wrap{margin-top:32px;}
  /* 大きめボタンはサイト標準の枠線ボタンと同じ幅の考え方に戻します */
  .btn--lg{min-width:min(299px,100%);max-width:100%;min-height:58px;font-size:17px;letter-spacing:.06em;}

  .pd-center .pd-ttl{margin-bottom:20px;}
  .pd-center .pd-ttl::after{bottom:-20px;}
  /* 本文の中央寄せは読みにくいので、スマホでは左揃えに戻します */
  .pd-center .pd-text{text-align:left;}
  .pd-center .btn-wrap{margin-top:36px;}
}

/* ============================================================
   11. 日本印の阿波晩茶（/products/）
   ------------------------------------------------------------
   接頭辞は pp-（products page）。他ページのクラスとは干渉しません。
   見出し（h2）は下層ページ共通の .lower-ttl を使っています。
   ============================================================ */

/* --- 共通 ------------------------------------------------- */
.pp-text + .pp-text{margin-top:27px;}
.pp-num{display:block;margin-bottom:37px;}
.pp-num img{display:block;}
.pp-roof img{display:block;width:232px;margin-inline:auto;}
.pp-btn{margin-top:78px;}
.pp-sec{background:#fff;}
.pp-beige,
.pp-beige .pp-sec{background:var(--beige);}

/* 上下を線で挟んだラベル（茶葉タイプ ティーバッグ／サプリタイプ（準備中）） */
.pp-tag{
  display:block;
  width:fit-content;
  margin-inline:auto;
  padding:0 11px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:18px;
  font-weight:700;
  line-height:52px;
  text-align:center;
}
.pp-tag--sm{
  margin-inline:0;
  padding:0 12px;
  font-size:16px;
  line-height:41px;
  color:var(--th-b);
}

/* --- 商品画像・キャッチ・導入文 ----------------------------- */
.pp-top{padding-bottom:140px;}
.pp-fv{position:relative;left:1.3%;width:75.8%;margin:-132px auto 0;}
.pp-fv img{display:block;width:100%;}
.pp-intro{margin-top:50px;text-align:center;}
.pp-intro__catch{font-size:28px;font-weight:700;line-height:1.543;}
.pp-intro__sub{margin-top:18px;font-size:16px;font-weight:700;}
.pp-intro__text{margin-top:27px;}
.pp-intro__sub + .pp-intro__text{margin-top:62px;}

/* --- 一、扱う理由（左＝見出し／右＝本文） ------------------- */
.pp-reason{padding:111px 0 126px;}
.pp-reason__inner{display:flex;align-items:flex-start;}
.pp-reason__head{flex:none;margin-top:59px;}
.pp-reason__body{flex:none;width:62%;margin-left:auto;}

/* --- 二、背景ごと届けたい ------------------------------------ */
/* 写真の下端から47px上でベージュに切り替わります（上側の白は ::before） */
.pp-back{position:relative;z-index:0;padding-bottom:131px;background:var(--beige);}
.pp-back__photo{position:relative;}
.pp-back__photo::before{
  content:"";
  position:absolute;
  top:0;
  bottom:47px;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#fff;
  z-index:-1;
}
.pp-back__photo img{display:block;width:100%;}
.pp-back__box{
  position:relative;
  width:707.9px;
  max-width:100%;
  margin:-171px max(0px, calc((100% - 1000px) / 2)) 0 auto;
  padding:66px 48px 61px 66px;
  background:#fff;
}
.pp-back__box .pp-num{margin-bottom:23px;}
.pp-back__box .lower-ttl + .pp-text{margin-top:39px;}

.pp-factors{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:33px;
  margin-top:71px;
}
.pp-factor{min-height:269px;padding:26px 27px 30px;background:#fff;}
.pp-factor__no{
  display:block;
  font-family:"Times New Roman",Times,serif;
  font-size:26px;
  font-weight:700;
  line-height:1;
  color:var(--th-b);
  text-align:center;
}
.pp-factor__ttl{
  position:relative;
  margin-top:17px;
  padding-bottom:33px;
  font-size:20px;
  line-height:1.38;
}
.pp-factor__ttl::after{
  content:"";
  position:absolute;
  left:2px;
  bottom:0;
  width:35px;
  height:1px;
  background:var(--line);
}
.pp-factor__text{margin-top:26px;font-size:16px;line-height:1.72;}
.pp-back__close{margin-top:37px;}

/* --- 三、大切にしていること（写真と本文を左右交互） --------- */
.pp-policy{padding:114px 0 159px;}
.pp-rows{margin-top:60px;}
.pp-row{display:flex;align-items:center;justify-content:space-between;}
.pp-row + .pp-row{margin-top:90px;}
.pp-row:nth-child(even){flex-direction:row-reverse;}
.pp-row__media{flex:none;width:46.2%;}
.pp-row__media img{display:block;width:100%;}
.pp-row__body{flex:none;width:46%;}
.pp-row__no{
  display:block;
  font-family:"Times New Roman",Times,serif;
  font-size:26px;
  font-weight:700;
  line-height:1;
  color:var(--th-b);
}
.pp-row__ttl{margin-top:17px;font-size:22px;line-height:1.45;}
.pp-row__ttl + .pp-text{margin-top:34px;}

/* --- 本家 阿波晩茶（ラインナップ・商品仕様） ---------------- */
.pp-item{padding-top:133px;}
.pp-item__ttl{margin-top:53px;font-size:28px;line-height:1.543;text-align:center;}
.pp-item .pp-tag{margin-top:42px;}
.pp-item__lead{margin-top:52px;}

.pp-lineup{margin-top:56px;}
.pp-lineup__cats{display:flex;justify-content:space-between;padding-left:.37%;}
.pp-lineup__cat{
  font-size:18px;
  font-weight:700;
  line-height:43.9px;
  color:#fff;
  text-align:center;
  background:var(--th-d);
}
.pp-lineup__cat--pot{width:63.25%;}
.pp-lineup__cat--mug{width:33.06%;}
/* 3つの画像は同じ縮尺（原寸の約51%）。透過の余白ぶん少し重ねて並べます */
.pp-lineup__list{display:flex;align-items:stretch;margin-top:22px;}
.pp-lineup__item{flex:none;display:flex;flex-direction:column;justify-content:flex-end;}
.pp-lineup__item:nth-child(1){width:35.3%;margin-left:-1.4%;}
.pp-lineup__item:nth-child(2){width:34.6%;margin-left:-1.25%;}
.pp-lineup__item:nth-child(3){width:35.2%;margin-left:-1.2%;}
.pp-lineup__use{display:none;}
.pp-lineup__img img{display:block;width:100%;}
/* 3g×15包だけ、デザインどおり少し下げています */
.pp-lineup__item:nth-child(2) .pp-lineup__img{transform:translateY(9px);}
/* 容量はパッケージの中心（ティーバッグを除く）の下に来るよう、少し左に寄せています */
.pp-lineup__size{margin-top:-4px;padding-right:9%;font-size:18px;font-weight:700;text-align:center;}
/* ラインナップの下の注記（Amazonの取り扱い状況について） */
.pp-lineup__note{margin-top:34px;font-size:15px;color:var(--th-b);text-align:center;}

.pp-spec{width:75.76%;margin:51px auto 0;}
.pp-spec__ttl{font-size:22px;line-height:1.45;}
.pp-spec .table-scroll{margin-top:21px;}
.pp-spec__tbl{width:100%;font-size:17px;line-height:1.64;}
.pp-spec__tbl th,
.pp-spec__tbl td{height:63px;padding:0 25px;vertical-align:middle;text-align:left;}
.pp-spec__tbl th{
  width:20.9%;
  padding-left:21px;
  border-top:1px solid #fff;
  border-left:1px solid var(--th-a);
  font-weight:700;
  color:#fff;
  background:var(--th-c);
  white-space:nowrap;
}
.pp-spec__tbl tr:first-child th{border-top-color:var(--th-a);}
.pp-spec__tbl td{border:1px solid var(--line);font-weight:500;}
.pp-spec + .pp-btn{margin-top:76px;}

/* --- 四、味わい ---------------------------------------------- */
.pp-taste{padding-top:134px;}
.pp-taste .lower-ttl + .pp-text{margin-top:53px;}
.pp-taste .pp-btn{margin-top:69px;}

/* --- まるごと阿波晩茶について -------------------------------- */
.pp-soon{padding-top:150px;}
.pp-soon__ttl{font-size:28px;line-height:1.543;}
.pp-soon__panel{
  display:flex;
  align-items:center;
  margin-top:33px;
  padding:42px 60px 36px 55px;
  background:#fff;
}
.pp-soon__media{flex:none;width:216px;}
.pp-soon__media img{display:block;width:100%;}
.pp-soon__body{flex:1;min-width:0;margin-left:49px;}
.pp-soon__name{margin-top:28px;font-size:24px;line-height:1.417;}
.pp-soon__name + .pp-text{margin-top:26px;}
.pp-soon__note{margin-top:24px;font-size:16px;color:var(--th-b);}
/* まるごと阿波晩茶のページ（/products/marugoto.php）への導線 */
.pp-soon__link{margin-top:22px;}

/* --- ご購入について ------------------------------------------ */
.pp-buy{padding:142px 0 162px;text-align:center;}
.pp-buy__ttl{margin-top:54px;font-size:28px;line-height:1.543;}
.pp-buy__text{margin-top:27px;}
.pp-buy__ttl + .pp-buy__text{margin-top:63px;}
.pp-buy .pp-btn{margin-top:64px;}
.pp-buy__note{margin-top:36px;font-size:15px;color:var(--footer-sub);}

/* ---------- タブレット：768px 〜 1080px ---------- */
@media screen and (max-width:1080px){
  .pp-text + .pp-text{margin-top:22px;}
  .pp-num{margin-bottom:28px;}
  .pp-btn{margin-top:56px;}

  .pp-top{padding-bottom:100px;}
  .pp-fv{margin-top:-110px;}
  .pp-intro__catch{font-size:24px;}
  .pp-intro__sub + .pp-intro__text{margin-top:44px;}

  .pp-reason{padding:90px 0 90px;}
  .pp-reason__inner{display:block;}
  .pp-reason__head{margin-top:0;}
  .pp-reason__body{width:100%;margin-top:36px;}

  .pp-back{padding-bottom:90px;}
  .pp-back__photo::before{bottom:24px;}
  .pp-back__box{width:auto;margin:-80px 0 0 12%;padding:44px 40px 44px;}
  .pp-back__box .lower-ttl + .pp-text{margin-top:30px;}
  .pp-factors{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px;}
  .pp-factor{min-height:0;}
  .pp-factor__ttl{font-size:18px;}

  .pp-policy{padding:90px 0 110px;}
  .pp-rows{margin-top:44px;}
  .pp-row + .pp-row{margin-top:64px;}
  .pp-row__ttl{font-size:20px;}

  .pp-item{padding-top:100px;}
  .pp-item__ttl{font-size:24px;}
  .pp-lineup__cat{font-size:16px;}
  .pp-lineup__size{font-size:16px;}
  .pp-lineup__note{margin-top:24px;font-size:14px;}
  .pp-spec{width:100%;}
  .pp-spec__ttl{font-size:20px;}

  .pp-taste{padding-top:100px;}
  .pp-taste .lower-ttl + .pp-text{margin-top:36px;}

  .pp-soon{padding-top:110px;}
  .pp-soon__ttl{font-size:24px;}
  .pp-soon__panel{padding:36px 40px;}
  .pp-soon__media{width:180px;}
  .pp-soon__body{margin-left:36px;}
  .pp-soon__name{font-size:20px;}

  .pp-buy{padding:100px 0 110px;}
  .pp-buy__ttl{font-size:24px;}
  .pp-buy__ttl + .pp-buy__text{margin-top:44px;}
}

/* ---------- スマートフォン：〜767px ---------- */
@media screen and (max-width:767px){
  .pp-text + .pp-text{margin-top:20px;}
  .pp-num{margin-bottom:20px;}
  /* 一〜四は字幅をそろえて縮小（高さで揃えると「一」だけ大きく見えるため） */
  .pp-num img{width:67px;height:auto;}
  .pp-roof img{width:180px;}
  .pp-btn{margin-top:40px;}
  .pp-tag{font-size:15px;line-height:42px;}
  .pp-tag--sm{font-size:14px;line-height:34px;}

  .pp-top{padding-bottom:64px;}
  .pp-fv{left:0;width:88%;margin-top:-56px;}
  .pp-intro{margin-top:20px;}
  .pp-intro__catch{font-size:20px;line-height:1.6;}
  .pp-intro__sub{margin-top:12px;font-size:14px;}
  .pp-intro__sub + .pp-intro__text{margin-top:32px;}
  .pp-intro__text{margin-top:20px;}

  .pp-reason{padding:64px 0;}
  .pp-reason__body{margin-top:24px;}

  .pp-back{padding-bottom:64px;}
  .pp-back__photo::before{bottom:16px;}
  .pp-back__box{margin:-40px 0 0 6%;padding:28px 22px 30px;}
  .pp-back__box .pp-num{margin-bottom:16px;}
  .pp-back__box .lower-ttl + .pp-text{margin-top:24px;}
  .pp-factors{grid-template-columns:1fr;gap:12px;margin-top:32px;}
  .pp-factor{padding:20px 22px 22px;}
  .pp-factor__no{font-size:22px;}
  .pp-factor__ttl{margin-top:10px;padding-bottom:18px;font-size:17px;text-align:left;}
  .pp-factor__text{margin-top:14px;}
  .pp-back__close{margin-top:28px;}

  .pp-policy{padding:64px 0 72px;}
  .pp-rows{margin-top:32px;}
  .pp-row,
  .pp-row:nth-child(even){display:block;}
  .pp-row + .pp-row{margin-top:48px;}
  .pp-row__media,
  .pp-row__body{width:100%;}
  .pp-row__body{margin-top:20px;}
  .pp-row__no{font-size:22px;}
  .pp-row__ttl{margin-top:10px;font-size:18px;}
  .pp-row__ttl + .pp-text{margin-top:16px;}

  .pp-item{padding-top:64px;}
  .pp-item__ttl{margin-top:20px;font-size:20px;}
  .pp-item .pp-tag{margin-top:24px;}
  .pp-item__lead{margin-top:28px;}
  /* スマホは用途の帯を消して、各商品の上に用途を出します（縦並び） */
  .pp-lineup{margin-top:40px;}
  .pp-lineup__cats{display:none;}
  .pp-lineup__list{display:block;margin-top:0;}
  .pp-lineup__item:nth-child(n){width:78%;margin:0 auto;}
  .pp-lineup__item + .pp-lineup__item{margin-top:36px;}
  .pp-lineup__use{
    display:block;
    margin-bottom:14px;
    font-size:15px;
    font-weight:700;
    line-height:36px;
    color:#fff;
    text-align:center;
    background:var(--th-a);
  }
  .pp-lineup__note{margin-top:20px;font-size:13px;text-align:left;}
  .pp-spec{margin-top:28px;}
  .pp-spec__ttl{font-size:18px;}
  .pp-spec .table-scroll{margin-top:20px;}
  /* 仕様表はスマホでも横スクロールさせず、画面幅に収めます */
  .pp-spec__tbl{font-size:15px;}
  .pp-spec__tbl th,
  .pp-spec__tbl td{height:auto;padding:12px 14px;}
  .pp-spec__tbl th{width:30%;white-space:normal;}
  .pp-spec + .pp-btn{margin-top:40px;}

  .pp-taste{padding-top:64px;}
  .pp-taste .lower-ttl + .pp-text{margin-top:24px;}

  .pp-soon{padding-top:64px;}
  .pp-soon__ttl{font-size:20px;}
  .pp-soon__panel{display:block;margin-top:24px;padding:28px 22px 30px;}
  .pp-soon__media{width:48%;margin:0 auto;}
  .pp-soon__body{margin:24px 0 0;}
  .pp-soon__name{margin-top:16px;font-size:18px;}

  .pp-buy{padding:64px 0 72px;}
  .pp-buy__ttl{margin-top:20px;font-size:20px;}
  /* 中央寄せの長文は読みにくいので、スマホでは左揃えにします */
  .pp-buy__text{text-align:left;}
  .pp-buy__ttl + .pp-buy__text{margin-top:28px;}
  .pp-buy__note{font-size:13px;}
}

/* ============================================================
   12. まるごと阿波晩茶（/products/marugoto.php）
   ------------------------------------------------------------
   接頭辞は mg-（marugoto）。他ページのクラスとは干渉しません。
   見出し（h2）は下層ページ共通の .lower-ttl、
   本文・番号・屋根・ラベルは「11.」の .pp-text / .pp-num /
   .pp-roof / .pp-tag をそのまま使っています。
   ============================================================ */

/* --- 商品画像・キャッチ・導入文 ----------------------------- */
.mg-top{padding-bottom:103px;}
/* ページタイトル（白地）に重ねるため、上に -118px 出しています */
.mg-fv{position:relative;width:73.64%;margin:-120px auto 0;}
.mg-fv img{display:block;width:100%;}
.mg-status{margin-top:63px;}
/* このページのラベルは、デザインに合わせて幅を固定しています */
.mg-status,
.mg-item .pp-tag{width:231px;padding:0;}
.mg-intro{margin-top:50px;text-align:center;}
.mg-intro__catch{font-size:28px;font-weight:700;line-height:1.543;}
.mg-intro__sub{margin-top:20px;font-size:16px;font-weight:700;}
.mg-intro__text{margin-top:42px;}

/* --- 一、茶葉で飲むだけではもったいない --------------------- */
/* 左＝見出し／右＝写真＋本文 */
.mg-reason{padding:125px 0 139px;}
.mg-reason__inner{display:flex;align-items:flex-start;}
.mg-reason__head{flex:none;margin-top:25px;}
.mg-reason__body{flex:none;width:62%;margin-left:auto;}
.mg-reason__media{width:84.2%;margin:0 auto 20px;}
.mg-reason__media img{display:block;width:100%;}

/* --- まるごと阿波晩茶（商品・準備中） ----------------------- */
.mg-item{padding:133px 0 115px;background:var(--beige);}
.mg-item__ttl{margin-top:53px;font-size:28px;line-height:1.543;text-align:center;}
.mg-item .pp-tag{margin-top:42px;}
.mg-item__row{display:flex;align-items:flex-start;justify-content:space-between;margin-top:56px;}
.mg-item__media{flex:none;width:33.35%;}
.mg-item__img img{display:block;width:100%;}
.mg-item__size{margin-top:19px;font-size:18px;font-weight:700;text-align:center;}
/* 本文の位置はデザインに合わせ、商品画像の中ほどから始めています */
.mg-item__body{flex:none;width:58%;margin-top:183px;}
.mg-item__status{
  padding:7px 16px;
  font-size:18px;
  font-weight:700;
  color:#fff;
  text-align:center;
  background:#3d3939;
}
.mg-item__status + .pp-text{margin-top:33px;}

/* ---------- タブレット：768px 〜 1080px ---------- */
@media screen and (max-width:1080px){
  .mg-top{padding-bottom:80px;}
  .mg-fv{width:80%;margin-top:-100px;}
  .mg-status{margin-top:48px;}
  .mg-intro{margin-top:36px;}
  .mg-intro__catch{font-size:24px;}
  .mg-intro__text{margin-top:44px;}

  .mg-reason{padding:90px 0 100px;}
  .mg-reason__inner{display:block;}
  .mg-reason__head{margin-top:0;}
  .mg-reason__body{width:100%;margin-top:36px;}
  .mg-reason__media{width:70%;margin-bottom:12px;}

  .mg-item{padding:100px 0 90px;}
  .mg-item__ttl{font-size:24px;}
  .mg-item__row{align-items:center;margin-top:44px;}
  .mg-item__media{width:36%;}
  .mg-item__body{width:56%;margin-top:0;}
}

/* ---------- スマートフォン：〜767px ---------- */
@media screen and (max-width:767px){
  .mg-top{padding-bottom:56px;}
  .mg-fv{width:88%;margin-top:-56px;}
  .mg-status{margin-top:28px;}
  .mg-intro{margin-top:24px;}
  .mg-intro__catch{font-size:20px;line-height:1.6;}
  .mg-intro__sub{margin-top:12px;font-size:14px;}
  .mg-intro__text{margin-top:28px;}

  .mg-reason{padding:64px 0 64px;}
  .mg-reason__body{margin-top:24px;}
  .mg-reason__media{width:100%;margin-bottom:8px;}

  .mg-item{padding:64px 0 64px;}
  .mg-item__ttl{margin-top:20px;font-size:20px;}
  .mg-item__row{display:block;margin-top:32px;}
  .mg-item__media{width:62%;margin:0 auto;}
  .mg-item__size{margin-top:14px;font-size:16px;}
  .mg-item__body{width:100%;margin-top:32px;}
  .mg-item__status{padding:10px 14px;font-size:16px;}
  .mg-item__status + .pp-text{margin-top:24px;}
}

/* ============================================================
   13. お問い合わせ（/contact/）
   ------------------------------------------------------------
   接頭辞は ct-。入力フォーム（contact/index.php）と
   送信完了（contact/thanks.php）の2ページで使います。
   ・メール送信プログラム付属の css/mailform.css は読み込まず、
     必要な部分（エラー文・送信中のローディング）だけここに書いています
   ・フッターは著作表記のみの簡易版（.footer--simple）です
   ============================================================ */

.ct-body{padding-bottom:152px;}
.ct-body--thanks{padding-bottom:169px;}

/* 写真の下のリード文・完了メッセージ */
.ct-lead{margin-top:80px;}

/* --- 入力フォーム -------------------------------------------- */
/* 1行＝［必須／任意ラベル ＋ 項目名］＋［入力欄］。行ごとに下線を引いています */
.ct-form{margin-top:109px;}
.ct-field{
  display:flex;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid #d8d7d7;
}
.ct-field dt{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:22.2%;
  font-size:17px;
  font-weight:700;
  line-height:1.64;
  text-align:right;
}
.ct-field dd{flex:1;min-width:0;margin-left:6.34%;}
/* お問い合わせ内容の行だけ、項目名を入力欄の上端に合わせます */
.ct-field--area{align-items:flex-start;padding-bottom:31px;}

/* 必須／任意のラベル */
.ct-badge{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:32px;
  margin-right:auto;
  font-size:15px;
  font-weight:700;
  line-height:1;
  color:#fff;
  background:var(--th-a);
}
.ct-badge--any{background:#3e3a39;}

.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"],
.ct-form textarea{
  display:block;
  width:100%;
  padding:0 20px;
  border:1px solid var(--line);
  border-radius:0;
  background:transparent;
  font-family:inherit;
  font-size:17px;
  font-weight:500;
  line-height:1.64;
  letter-spacing:inherit;
  color:var(--ink);
  -webkit-appearance:none;
  appearance:none;
}
.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"]{height:57px;}
.ct-form textarea{height:274px;padding:15px 20px;resize:vertical;}
.ct-form input[type="text"]:focus,
.ct-form input[type="email"]:focus,
.ct-form input[type="tel"]:focus,
.ct-form textarea:focus{
  outline:2px solid var(--th-a);
  outline-offset:1px;
}

/* 送信ボタン（デザインに合わせて少し幅広） */
.ct-btn{margin-top:87px;}
.ct-btn .btn{left:0;min-width:319px;}
.ct-btn input.btn{cursor:pointer;background:transparent;}
.ct-btn input.btn:hover{background:var(--ink);color:#fff;}
/* 送信ボタンの右に伸びる線（input には ::after が付けられないため span 側で描画） */
.ct-btn__line{position:relative;display:inline-flex;max-width:100%;}
.ct-btn__line::after{
  content:"";
  position:absolute;
  top:50%;
  left:calc(100% - 17px);
  width:36px;
  height:1px;
  background:var(--line);
  transition:width .3s;
}
.ct-btn__line:hover::after{width:56px;}
.ct-body--thanks .ct-btn{margin-top:85px;}

/* エラー文（文言はメールフォームのプログラムが入れます） */
.ct-form .error_blank,
.ct-form .error_format,
.ct-form .error_match{
  display:block;
  margin-top:10px;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  color:#b3261e;
}
.ct-form .error_blank:empty,
.ct-form .error_format:empty,
.ct-form .error_match:empty{display:none;}

/* 送信中のローディング表示（プログラムが body に追加します） */
div.loading-layer{
  position:fixed;
  left:0;
  top:0;
  z-index:10000;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,.7);
}
span.loading{
  position:absolute;
  left:50%;
  top:50%;
  width:50px;
  height:50px;
  margin:-30px 0 0 -30px;
  border:5px solid rgba(255,255,255,.2);
  border-left-color:#fff;
  border-radius:50%;
  animation:ct-load 1s linear infinite;
}
@keyframes ct-load{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion:reduce){
  span.loading{animation-duration:3s;}
}

/* --- 簡易フッター（著作表記のみ） ----------------------------- */
.footer--simple{padding:54px 0 146px;}
.footer--simple .footer__copy{margin-top:0;padding-top:0;border-top:0;}

/* ---------- タブレット：768px 〜 1080px ---------- */
@media screen and (max-width:1080px){
  .ct-body{padding-bottom:120px;}
  .ct-body--thanks{padding-bottom:110px;}
  .ct-lead{margin-top:56px;}
  .ct-form{margin-top:64px;}
  .ct-field{padding:20px 0;}
  /* 項目名が折り返さないよう、見出し側を少し広げます */
  .ct-field dt{width:32%;}
  .ct-field dd{margin-left:3%;}
  .ct-field--area{padding-bottom:24px;}
  .ct-form textarea{height:240px;}
  .ct-btn{margin-top:64px;}
  .ct-body--thanks .ct-btn{margin-top:64px;}
  .footer--simple{padding:44px 0 96px;}
}

/* ---------- スマートフォン：〜767px ---------- */
@media screen and (max-width:767px){
  .ct-body{padding-bottom:72px;}
  .ct-body--thanks{padding-bottom:72px;}
  .ct-lead{margin-top:32px;}
  .ct-form{margin-top:36px;}
  /* スマホでは［ラベル＋項目名］の下に入力欄を置きます */
  .ct-field,
  .ct-field--area{display:block;padding:18px 0;}
  .ct-field dt{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    width:auto;
    font-size:16px;
    text-align:left;
  }
  .ct-badge{width:42px;height:28px;margin-right:0;font-size:13px;}
  .ct-field dd{margin:10px 0 0;}
  /* iOSで拡大されないよう、入力欄は16px以上にしています */
  .ct-form input[type="text"],
  .ct-form input[type="email"],
  .ct-form input[type="tel"],
  .ct-form textarea{padding:0 14px;font-size:16px;}
  .ct-form input[type="text"],
  .ct-form input[type="email"],
  .ct-form input[type="tel"]{height:52px;}
  .ct-form textarea{height:200px;padding:12px 14px;}
  .ct-btn{margin-top:40px;}
  .ct-body--thanks .ct-btn{margin-top:40px;}
  /* ボタンの幅はコンテンツ幅の76%（右に伸びる線ぶんの余白が残ります） */
  .ct-btn__line{display:inline-flex;width:76%;}
  .ct-btn__line .btn{min-width:0;max-width:none;width:100%;}
  .ct-btn > .btn{min-width:0;max-width:none;width:76%;}
  .footer--simple{padding:36px 0 56px;}
}

/* ============================================================
   14. 運営者情報（/aboutus/）
   ------------------------------------------------------------
   接頭辞は ab-。フッターは著作表記のみの簡易版（.footer--simple）です。
   ============================================================ */

/* メイン画像を重ねないページ用に、タイトル下の余白を詰めた見出し */
.lower-head--slim{padding-bottom:72px;}

/* 上の余白は .ab-body 側に持たせています（子のmargin-topだとベージュ地の外に出るため） */
.ab-body{padding:112px 0 199px;}
/* 本文の幅は700px（他ページの1000pxより狭め） */
.ab-inner{width:700px;max-width:100%;margin-inline:auto;}

.ab-logo{text-align:center;}
.ab-logo img{display:inline-block;width:278px;}

.ab-intro{margin-top:83px;}
.ab-intro p + p{margin-top:27px;}

/* --- 運営者情報の一覧 ---------------------------------------- */
.ab-list{margin-top:66px;}
.ab-row{padding:24px 0;border-bottom:1px solid #d8d7d7;}
.ab-row dt{font-size:17px;font-weight:700;line-height:1.64;}
.ab-row dd{margin-top:12px;font-size:17px;font-weight:500;line-height:1.64;}

/* ---------- タブレット：768px 〜 1080px ---------- */
@media screen and (max-width:1080px){
  .lower-head--slim{padding-bottom:56px;}
  .ab-body{padding:80px 0 120px;}
  .ab-logo img{width:240px;}
  .ab-intro{margin-top:56px;}
  .ab-list{margin-top:48px;}
}

/* ---------- スマートフォン：〜767px ---------- */
@media screen and (max-width:767px){
  .lower-head--slim{padding-bottom:40px;}
  .ab-body{padding:48px 0 72px;}
  .ab-logo img{width:190px;}
  .ab-intro{margin-top:36px;}
  .ab-intro p + p{margin-top:20px;}
  .ab-list{margin-top:36px;}
  .ab-row{padding:18px 0;}
  .ab-row dt{font-size:16px;}
  .ab-row dd{margin-top:8px;font-size:16px;}
}