@charset "UTF-8";

/* このファイルはGitで管理しています。main へマージするとサーバーへ自動反映されるため、
   サーバー上で直接編集しないでください（次回の反映で上書きされます） */

/* =========================================
   デザイントークン（サイト共通の色・書体・余白の定義）
   ここに書いた値を各所から var(--名前) で呼び出す。
   色を変えたいときは、この1か所だけ直せばサイト全体に反映される。

   紫はサイトで実際に使われていた色（#664994・#986eb3・#a46bca・#efe9f6・#f7f5f9）を
   そのまま残し、抜けていた濃い側と罫線用だけを足して1本のスケールにしている。
   ========================================= */
:root {
	/* 紫（濃い→淡い） */
	--pr-purple-900: #2a1e3d;
	--pr-purple-800: #3a2b52;
	--pr-purple-700: #4c3a6e;
	--pr-purple-600: #664994;
	--pr-purple-500: #7d5fae;
	--pr-purple-400: #986eb3;
	--pr-purple-300: #a46bca;
	--pr-purple-200: #cbb8dd;
	--pr-purple-100: #efe9f6;
	--pr-purple-50: #f7f5f9;

	/* 文字・線・背景 */
	--pr-ink: #333;
	--pr-ink-mute: #6b6472;
	--pr-line: #e4dfea;
	--pr-bg: #fff;
	--pr-bg-soft: #faf8fc;

	/* 書体。日本語は明朝（読み物）、UI部品はゴシック、数字と英字は既存の futura-pt */
	--pr-font-serif: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	--pr-font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--pr-font-en: futura-pt, "Futura", "Century Gothic", sans-serif;

	/* 形 */
	--pr-radius: 3px;
	--pr-shadow: 0 1px 3px rgba(42, 30, 61, 0.06);
	--pr-shadow-hover: 0 6px 20px rgba(42, 30, 61, 0.1);

	/* 本文の幅。記事もアーカイブもこの幅に揃える */
	--pr-content: 1200px;
	--pr-article: 720px;
}

/*-------------------------------共通css-------------------------------*/
body {overflow-wrap: break-word;word-break: normal;font-family: futura-pt, sans-serif;overflow-x: hidden;color: #333;display: flex;flex-flow: column;min-height: 100vh;}
main{margin-top:auto; width: 100%;letter-spacing: 1px;overflow: hidden; font-family: serif;}

.sp {display: none;}
.pc {display: block;}
img {width: 100%;height: auto;}
.ttl {font-size: 14px;}
#top .ttl h2 {font-size: 25px; text-align: center;}
#top .ttl h2::after {content: " ";border: solid 1px #664994;display: block;width: 55px;margin: 15px auto;}
p {line-height: 2;font-size: 15px;}
.red{color: #d54a4a;}
.wrapper {overflow-x: hidden;}
/* パンくずりすと */
.breadcrumbs {width: 85%;margin: 0 0 1% auto;font-family: var(--pr-font-sans);font-size: 13px;color: var(--pr-ink-mute);}
.breadcrumbs a {color: var(--pr-purple-600);}
/* 404ページ */
.error404 {text-align: center;padding: 100px 0;}
.error404 h2 {text-align: center;margin-bottom: 20px;font-size: 25px;}
.error404 .home {text-align: center;}
.error404 p a {text-align: center;display: inline-block;margin: 20px 0;color: #4773ba;}

.wp-pagenavi {text-align: center;margin: 5% 0;}
.wp-pagenavi span {text-decoration: none;display: inline-block;margin: 0 8px 8px;padding: 3px 8px;font-size: 14px;}
.object-fit-img {object-fit: cover;font-family: "object-fit: contain;";}


/* PV数表示（.post-views＝下層ページ用、.top_view＝トップ用。中身は同じ） */
.post-views,
.top_view {display: inline;position: fixed;bottom: 170px;right: 4%;z-index: 101;}

/*マーカーアニメーション*/
.marker.active {background-position: -100% .5em;}
.marker{
  background-image: -webkit-linear-gradient(left, transparent 50%, #f9e5ff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #f9e5ff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #f9e5ff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #f9e5ff 50%);
  background-image: linear-gradient(left, transparent 50%, #f9e5ff 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 1.5s ease;
  font-weight: bold;}


/* 光るボタン ---------------------- */
.btn-shine {text-align: center;margin: 1rem;}
.btn-shine a {display: inline-block;padding:0.9em 6em;background:#a46bca;color: #fff;text-decoration: none;border-radius: 100vh;transition: 0.3s; color: #fff!important; position: relative;overflow: hidden;} 
.btn-shine a:hover {opacity: 1;box-shadow: none;transform: scale(0.99, 0.99) translateY(1px);}
.btn-shine a:after {content: "";position: absolute;top: -50%;left: -50%;width: 10%;height: 150%;opacity: 0.5;filter: blur(1px);background: rgba(255, 255, 255, 0.5); transform: rotate(45deg);animation: reflect 3s ease-in-out infinite;}

/*** 光のアニメーション ***/
@keyframes reflect {
  0%,
  75% {transform: rotate(45deg) scale(0);opacity: 1;}
  100% {transform: rotate(45deg) scale(100);opacity: 0;}
}
/*** ボタンを光らせるここまで ---------------------------***/
/* shopify用css */
.shopify-buy__product__title{font-family: "Noto Serif JP", serif!important;font-size: 2vw;font-weight: bold;position: relative;margin-bottom: 3%;}

/* 業務用お取引 */
.sale{width: 85%; margin:0 0 0 auto; padding: 80px 0;}
/* 見出しは #top .ttl h2（25px・中央寄せ・下線）をそのまま使う。
   以前はここで 16px!important に上書きしていたが、他ページの見出しと大きさが揃わなくなるため削除した */
/* .Wholesale は /reserve（page-shopify.php）で今も使われているので残す */
.Wholesale{background-color: #626262; width: 350px; margin: 40px auto;}
.Wholesale a{color:#fff ; padding: 7px 20px; display: block; margin: 0 auto; text-align: center;}

/*-------------------------------header-------------------------------*/
header {width: 15%;height: 100vh;position: fixed;z-index: 100;}
header .container {position: absolute;z-index: 6;height: 100%;}
/* ロゴ。以前は header h1 に指定していたが、ロゴをpに統一したため
   ラッパーの .header-logo に付け替え（下層ページでロゴが大きすぎる不具合も解消） */
header .header-logo {color: #fff;text-align: center;width: 35%;margin: 0 auto;max-width: 150px;position: relative;z-index: 1;}
/* imgタグ側の width="100%" を実寸(px)に変えたぶん、表示幅はCSSで指定する
   （実寸を入れることでブラウザが表示前に高さを確保でき、読み込み中のガタつきが減る） */
header .header-logo img {width: 100%;height: auto;}
header .menu {height: 100vh;width: 100%;text-align: center;position: absolute;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
header .menu:before {content: "";background-color: #986eb3;position: absolute;top: 0;right: 0;bottom: 0;left: 0;opacity: 0.9;z-index: -1;}
header .menu nav {width: 100%;position: absolute;top: 50%;left: 0%;transform: translateY(-50%) translateX(-0%);-webkit-transform: translateY(-50%) translateX(-0%);}
header .menu li {margin-bottom: 3%;}
header .menu li a {font-size: 11px;color: #fff;display: block;padding: 10px;}
header .sns {width: 100%;padding: 15px;position: absolute;left: 50%;transform: translateY(-5%) translateX(-50%);-webkit-transform: translateY(-0%) translateX(-50%);bottom: 35px;text-align: center;}
header .sns .line {color: #fff;margin-bottom: 15px;}
header .sns .line p {line-height: 1.6;}
header .sns .line a {font-size: 11px;}
header .sns a {color: #fff;}
header .sns ul {display: flex;justify-content: space-around;}
header .sns ul li a {color: #fff;display: block;font-size: 15px;transition: 0.2s;margin-bottom: 3%;}
header .sns ul li a:hover {opacity: 1;}
header .sns ul li .twitter:hover {color: #00acee;}
header .sns ul li .insta:hover {color: #cf2e92;}
header .sns ul li .facebook:hover {color: #3c5a99;}
.sp-humberger{width: 100%; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 999; transition: transform 0.3s ease-in-out; display: none;}
.sp-humberger .container{ display: flex; align-items: center;}
.sp-humberger .humberger{width: 10%;}
.sp-humberger .logo{width: 40%; margin: 0 10% 0 20%;}
.sp-humberger .logo img {width: 100%;height: auto;}
.humberger {width: 62px;height: 62px;text-align: center;padding-top: 14px;z-index: 100;border-radius: 50%;}
.humberger p {line-height: 1;color: #333;font-size: 10px;}
.menu-trigger,
.menu-trigger span {display: inline-block;transition: all 0.4s;box-sizing: border-box;}
.menu-trigger {position: relative;width: 30px;height: 20px;}
.menu-trigger span {position: absolute;left: 0;width: 100%;height: 2px;background-color: #333;border-radius: 4px;}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 9px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}
#menu02.active span:nth-of-type(1) {-webkit-transform: translateY(10px) rotate(-315deg);transform: translateY(10px) rotate(-315deg);}
#menu02.active span:nth-of-type(2) {opacity: 0;}
#menu02.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(315deg);transform: translateY(-9px) rotate(315deg);}
@media (max-width: 768px) {
  .sp-humberger{display: flex!important; transform: translateY(0);}
  header { width:100%;left: -100%;transition: 0.2s ease-in-out;height: 100vh;}
  .openNav {left: 0;}
  header .menu:before {background-color: #fff;opacity:1;}
  header .menu li a {font-size: 15px;color: #333;}
  header .menu li {margin-bottom: 0%; border-bottom:1px solid #dadada ; padding: 5px 0;}
}


/* =========================================
   フッター
   以前は #a58caa の一色ベタで、サイトのどこにも使っていない紫だった。
   ブランドの紫を濃くした面（900〜800）に置き換え、
   「会社の情報」「サイトの行き先」「ショップとSNS」の3列に分けている。
   幅85%・右寄せは、左に固定表示しているヘッダー（15%）を避けるための既存の作り。
   ========================================= */
.pr-footer {width: 85%;margin: 0 0 0 auto;background: linear-gradient(180deg, var(--pr-purple-800) 0%, var(--pr-purple-900) 100%);color: rgba(255, 255, 255, 0.82);font-family: var(--pr-font-sans);}

/* 本文との境目に置く1本の線。雫マークを中央に重ねてブランドの印にする */
.pr-footer__top {position: relative;height: 1px;background-color: rgba(255, 255, 255, 0.14);}
.pr-footer__drop {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: linear-gradient(180deg, var(--pr-purple-800), var(--pr-purple-800));padding: 0 14px;line-height: 0;}
.pr-footer__drop svg {display: block;width: 12px;height: 18px;}

.pr-footer__inner {max-width: var(--pr-content);width: 90%;margin: 0 auto;padding: 60px 0 45px 0;display: flex;justify-content: space-between;gap: 40px;}

/* 1列目：会社の情報 */
.pr-footer__brand {width: 30%;}
.pr-footer__logo {width: 92px;margin-bottom: 22px;}
.pr-footer__logo img {width: 100%;height: auto;}
.pr-footer__company {font-family: var(--pr-font-serif);font-size: 16px;line-height: 1.6;color: #fff;margin-bottom: 14px;letter-spacing: 0.04em;}
.pr-footer__meta {font-size: 13px;line-height: 1.9;margin: 0;}
.pr-footer__meta dt {font-family: var(--pr-font-en);font-size: 11px;letter-spacing: 0.12em;text-transform: uppercase;color: rgba(255, 255, 255, 0.5);margin-top: 12px;}
.pr-footer__meta dd {margin: 2px 0 0 0;font-size: 13px;}

/* 2列目：サイトの行き先。項目数が多いので2段組にして縦に伸びすぎないようにする */
.pr-footer__nav {width: 42%;}
.pr-footer__ttl {font-family: var(--pr-font-en);font-size: 11px;letter-spacing: 0.16em;text-transform: uppercase;color: rgba(255, 255, 255, 0.5);margin-bottom: 18px;}
.pr-footer__list {column-count: 2;column-gap: 30px;}
.pr-footer__list li {break-inside: avoid;margin-bottom: 13px;}
.pr-footer__list a {font-size: 14px;line-height: 1.5;color: rgba(255, 255, 255, 0.82);position: relative;padding-left: 14px;display: inline-block;transition: 0.25s;}
.pr-footer__list a::before {content: "";position: absolute;top: 0.62em;left: 0;width: 5px;height: 1px;background-color: var(--pr-purple-300);transition: 0.25s;}
.pr-footer__list a:hover {opacity: 1;color: #fff;}
.pr-footer__list a:hover::before {width: 9px;}

/* 3列目：ショップとSNS */
.pr-footer__side {width: 24%;}
.pr-footer__shop {display: block;text-align: center;font-size: 14px;letter-spacing: 0.08em;color: #fff;border: solid 1px rgba(255, 255, 255, 0.35);border-radius: var(--pr-radius);padding: 14px 10px;margin-bottom: 28px;transition: 0.25s;}
.pr-footer__shop:hover {opacity: 1;background-color: var(--pr-purple-300);border-color: var(--pr-purple-300);color: #fff;}
.pr-footer__sns {display: flex;gap: 10px;}
.pr-footer__sns a {display: flex;align-items: center;justify-content: center;width: 38px;height: 38px;border: solid 1px rgba(255, 255, 255, 0.28);border-radius: 50%;color: rgba(255, 255, 255, 0.82);font-size: 15px;transition: 0.25s;}
.pr-footer__sns a:hover {opacity: 1;background-color: var(--pr-purple-300);border-color: var(--pr-purple-300);color: #fff;}

/* 最下段：コピーライト */
.pr-footer__bottom {border-top: solid 1px rgba(255, 255, 255, 0.12);}
.pr-footer__copy {max-width: var(--pr-content);width: 90%;margin: 0 auto;padding: 20px 0;text-align: center;font-family: var(--pr-font-en);font-size: 11px;letter-spacing: 0.1em;color: rgba(255, 255, 255, 0.45);line-height: 1.6;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
	.pr-footer {width: 100%;margin: 0;}
	.pr-footer__inner {display: block;width: 88%;padding: 45px 0 35px 0;}
	.pr-footer__brand,
	.pr-footer__nav,
	.pr-footer__side {width: 100%;}
	.pr-footer__brand {margin-bottom: 38px;}
	.pr-footer__nav {margin-bottom: 38px;}
	.pr-footer__list {column-gap: 20px;}
	.pr-footer__list a {font-size: 13px;}
	.pr-footer__sns {justify-content: flex-start;}
	.pr-footer__copy {padding: 18px 0;}
	/* 画面下に固定ボタンが出るページでは、その分だけ下に余白を足して文字が隠れないようにする */
	body.has-sticky-cta .pr-footer__bottom {padding-bottom: 66px;}
}


/* contactform7 */
.contactform{max-width: 800px; margin:0 auto;}
.contactform form p{font-size: 13px!important; margin-bottom: 10px!important;}
.contactform form input{margin:5px 0 15px 0; font-weight: bold; background-color: #f5f5f5; border-radius: 4px;box-shadow: none;color: #333;font-family: var(--s-font-61aeba65);font-size: 16px;font-weight: 400;height: 50px;justify-content: center;letter-spacing: 0em;line-height: 1.4;opacity: 1;padding: 10px 16px 10px 16px;text-align: left;width: 100%;max-width: 100%; border: none;}
.contactform form textarea {margin:10px 0 15px 0; font-weight: bold;background: #f5f5f5;border-radius: 4px;box-shadow: none;color: #333;font-family: var(--s-font-61aeba65);font-size: 16px;font-weight: 400;height: 160px;justify-content: center;letter-spacing: 0em;line-height: 1.4;opacity: 1;padding: 10px 16px 10px 16px;text-align: left;width: 100%;max-width: 100%;}
.contactform form input[type="submit"] {
  background: #bdbdbd;
  border-radius:6px;
  box-shadow: 0px 2px 12px 0px rgba(51, 51, 51, 0.3);
  color: #fff;
  flex: none;
  font-size: 18px;
  justify-content: center;
  margin: 0px auto;
  opacity: 1;
  padding: 12px 48px 12px;
  text-align: center;
  letter-spacing: 0.2em;
  display: block;
}
/*デフォルトの送信ボタンのスタイルを無効化する*/
input[type="submit"] {appearance: none;-webkit-appearance: none;-moz-appearance: none;}
span.wpcf7-spinner {display: none;}
.contact form input[type="submit"]{background: #333;border-radius: 320px;box-shadow: 0px 2px 12px 0px rgba(51, 51, 51, 0.3);color: #fff;flex: none;font-size: 18px;justify-content: center;margin: 0px 12px 12px;opacity: 1;padding: 12px 48px 12px;width: 280px;max-width: calc(100% - 24px);text-align: center; letter-spacing: 0.2em;}
/* お問いあわせチェックボックス */
.container .contactform form .checkbox input[type=checkbox] {display: none;}
.container .contactform form .checkbox input{background: #fff;border: 2px solid #231815;content: ''; height: 20px;left: 0px;margin:1px 0 0 0;width: 20px;}
.container .contactform .checkbox{display: flex; margin-bottom: 30px;}
.container .contactform .checkbox .wpcf7-list-item { display: block!important; padding: 5px 30px 5px 0px; margin:0 0 5px 0px!important;}
.container .contactform .checkbox .wpcf7-list-item label {box-sizing: border-box;cursor: pointer; display: block; position: relative;width: auto; font-weight:bold ; margin:0 0 5px 30px;}
.container .contactform .checkbox .wpcf7-list-item label::before  {background: #fff;border: 2px solid #9c9998;content: '';display: block;height: 15px;left: -30px;margin: 0 0 3px 0;position: absolute;top: 3px;width: 15px;}
.container .contactform .checkbox .wpcf7-list-item label span::after{border-right: 3px solid #ed7a9c; border-bottom: 3px solid #ed7a9c;content: '';display: block;height: 15px;left: -22px;margin-top: -7px;opacity: 0;position: absolute;top: 32%;transform: rotate(45deg);width: 5px;}
input[type=checkbox]:checked + span:after{opacity:1!important;}
@media screen and (max-width:768px){
  .container .contactform .checkbox {display:block;}
  .container .contactform .checkbox .wpcf7-list-item label {margin: 0 0 0px 30px;}
  .container .contactform .checkbox .wpcf7-list-item {margin: 0 0 0px 0px !important;}
  .container .contactform .checkbox p{margin: 0!important;}
}



/*-------------------------------トップ画像-------------------------------*/
.message {margin-top: -80px;position: relative;}

/* top画像切り替え */
.top {position: relative;}
.top .bg_container {position: relative;width: 100%;max-width: 100%;height: 95vh;}
.top .bg_container .image {position: absolute;width: 100%;height: 95vh;opacity: 0;animation: change-img-anim 9s infinite;}
.top .bg_container .image:nth-of-type(1) {animation-delay: 0s;}
.top .bg_container .image:nth-of-type(2) {animation-delay: 3s;}
.top .bg_container .image:nth-of-type(3) {animation-delay: 6s;}
@keyframes change-img-anim {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  63% {opacity: 0;}
  100% {opacity: 0;}
}
.top .txt {color: #fff;opacity: 0;text-align: center;width: 100%;height: 95vh;z-index: 0;position: absolute;padding: 60px 0 4% 4%;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);animation: change-txt-anim 9s infinite;background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);}
.top .txt:nth-child(1) {animation-delay: 0s;}
.top .txt:nth-child(2) {animation-delay: 3s;color: #a46bca;background: linear-gradient(to top, rgba(0, 0, 0, 0), transparent);}
.top .txt:nth-child(3) {animation-delay: 6s;}
/* メインビジュアルのキャッチコピー。1枚目はh1、2・3枚目はpだが見た目は共通
   （LPページのh1に影響させないため、要素名ではなくクラスで指定する） */
.top .txt .mv-copy {font-weight: lighter;line-height: 1;font-size: 3.4vw;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);}
.top .txt .mv-copy span {font-size: 1.7vw;}
@keyframes change-txt-anim {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  63% {opacity: 0;}
  100% {opacity: 0;}
}
@media screen and (max-width: 768px) {
  .top {height: 90vh;}
  .top .bg_container {height: 90vh;}
  .top .bg_container .image {height: 90vh;}
  .top .txt {margin: 0;text-align: center;width: 100%;height: 90vh;position: absolute;bottom: inherit;top: 0%;left: 0%;transform: translateY(0%) translateX(0%);-webkit-transform: translateY(0%) translateX(0%);}
  .top .txt .mv-copy {font-size: 7vw;width: 100%;}
  .top .txt .mv-copy span {font-size: 4.8vw;}
}
/*-------------------------------news-------------------------------*/
.news {width: 85%;margin: 0 0 0 auto;padding: 2%;}
#top .news {padding: 70px 2%;}
#top .news .ttl {text-align: center;}
#top .news dl {display: flex;flex-wrap: wrap;}
#top .news dl dt,
#top .news dl dd {margin-bottom: 20px;}

/* ページナビゲーション */
.pager {padding-top: 40px;width: 100%;margin-bottom: 30px;}
.pager .pagination {text-align: center;line-height: 0;}
.pager .pagination li {display: inline;margin: 0 2px;padding: 0;display: inline-block;width: 40px;height: 40px;overflow: hidden;text-align: center;position: relative;border-radius: 2px;}
.pager .pagination li a {vertical-align: middle;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;display: table;text-decoration: none;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: al0.3s ease;}
.pager .pagination li a span {display: table-cell;vertical-align: middle;transform: none;}
.pager .pagination li a:hover {color: #fff;background: #830000;opacity: 1;}
.pager .pagination li .active {color: #fff;background: #000;}
@media (max-width: 750px) {
  .pager .pagination li {display: none;}
  .pager .pagination .pre,
  .pager .pagination .next {display: inline-block;width: 40%;height: 50px;text-align: center;}
  .pager .pagination .pre a,
  .pager .pagination .next a {width: 100%;text-align: center;}
  .pager .pagination .pre span:after {content: " 前のページ";}
  .pager .pagination .next span:before {content: " 次のページ ";}
}

/*-------------------------------story-------------------------------*/
.concept .imgtxt .txt .ttl {text-align: center;}
.concept .imgtxt {width: 100%;display: flex;justify-content: space-around;}
.concept .imgtxt .img {background-image: url(../img/_SP_8037.jpg);background-size: cover;background-position: center center;background-repeat: no-repeat;width: 50%;}
.concept .imgtxt .txt {position: relative;width: 50%;margin: 0 0 0 auto;padding: 80px 0;}
.concept .imgtxt .txt .container {width: 80%;margin: 0 auto;}
.concept .imgtxt .txt h3 {position: relative;z-index: 1;font-size: 20px;margin-bottom: 5%;}
.concept .imgtxt .txt h3 span{font-size: 0.6rem; position: absolute;}
.concept .imgtxt .txt .h3 {color: #e8dcf2;font-size: 7.5vw;position: absolute;top: 12%;left: 3%;z-index: 0;line-height: 1;}
.concept .imgtxt .txt p {margin-bottom: 5%;position: relative;z-index: 1;}
.concept .imgtxt .txt span{font-size: 0.8rem;}
/*ギフト*/
.gift {width: 85%;margin: 0 0 0 auto;padding:30px 0;}
.gift .imgtxt {display: flex;justify-content: space-between;}
.gift .imgtxt .txt {width: 50%;position: relative;}
.gift .imgtxt .txt .inner-txt {width: 80%;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);}
.gift .imgtxt .txt .gift-ttl {text-align: center;margin-bottom: 10%;}
.gift .imgtxt .txt .inner-txt p {margin-bottom: 5%;}
.gift .imgtxt .in-img {width: 60%;}

.gift .ShopMore {display: block;width: 100px;margin: 0 auto;border: 1px solid #111;color: #111;text-align: center;padding: 5px 20px;min-width: 140px;letter-spacing: 1px;position: relative;-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}
.gift .items .cards {width: 96%; margin: 0 auto; display: flex;flex-wrap: wrap;}
.gift .items .cards .card {width: 31%;margin: 0 3.5% 30px 0;vertical-align: top;}
.gift .items .cards .card:nth-of-type(3n) {margin-right: 0 !important;}
.gift .items .cards .card a {width: 100%;transition: 0.3s;}
.gift .items .cards .card a:hover {box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);transform: translateY(-2px);opacity: 1;}
.gift .ttl p {text-align: center;font-size: 15px;line-height: 1.9;}
/* 写真の縦横比がばらついてもカードの高さが揃うようにする */
.gift .items .cards .card .img {height: auto;aspect-ratio: 3 / 2;overflow: hidden;}
.gift .items .cards .card .img img {width: 100%;height: 100%;object-fit: cover;}
.gift .items .cards .card .txt {width: 100%;padding: 12px 5px 0 5px;font-family: sans-serif;text-align: center;}
.gift .items .cards .card .txt .productName {font-size: 13px;line-height: 1.6;}
.gift .items .cards .card .txt .productPrice {font-size: 13px;font-weight: bold;color: #664994;margin-top: 4px;}

/* セット */
.set {padding: 90px 0;}
/* 話題性 */
.snsinfo {padding: 0 0 60px 0;}
.snsinfo .container {width: 85%;margin: 0 0 0 auto;}
.snsinfo .container .ttl {text-align: center;margin-bottom: 50px;}
.snsinfo .container .ttl p {font-size: 16px;}
.snsinfo .container .cards {display: flex;justify-content: space-between;flex-wrap: wrap;width: 96%;margin: 0 auto;}
.snsinfo .container .cards .card {width: 24%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);margin-bottom: 30px;}

/* -------話題性 紫ワイン------------------ */
.review-slider {padding: 0 0 70px 0;width: 85%;margin: 0 0 0 auto;}
.review-slider .ttl{text-align: center;}
.review-slider .ttl h3{font-size: 25px;}
.review-slider .ttlsquare{margin:80px auto 20px auto;}
.l-section .l-inner {padding-top:40px;padding-bottom: 8rem;}
.l-inner {position: relative;-webkit-box-sizing: content-box;box-sizing: content-box;max-width: 1200px;margin: 0 auto;padding: 0 10%;}
.swiper-pointer-events {touch-action: pan-y;}
.swiper {margin-left: auto;margin-right: auto;position: relative;overflow: hidden;list-style: none;padding: 0;z-index: 1;}
.review_card .slide { overflow: hidden;-webkit-transition: var(--transition), opacity 1s;transition: var(--transition), opacity 1s;border-radius: 4px;-webkit-box-shadow: var(--box-shadow);box-shadow:2px 3px 17px #dcdcdc;}
.review_card .swiper-slide{display: block;flex-shrink: 0 !important;}
.review_card .swiper-slide:not(.swiper-slide-visible) { opacity: 0.3;pointer-events: none;}
.review_card .slide-media {padding-top: 62.5%;}
.slide-media, .thumb-media {position: relative;overflow: hidden;}
.review_card .slide-media img {height: calc(100% + 16px);-webkit-transform: translateY(-16px);transform: translateY(-16px);}
.slide-media img, .thumb-media img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;}
/* もとは Sass の入れ子（&）のまま貼られていて、対応ブラウザとそうでないブラウザで
   見え方が変わる状態だった。今の見た目のまま通常のCSSに書き直している */
.review_card .swiper-slide:not(.swiper-slide-visible) .slide {pointer-events: none;opacity: 0.3;}
.review_card .slide-content { padding:20px 8px;}
.review_card .slide-date { font-size: 14px; line-height: 1; display: block; color: #f5695f;}
.review_card .slide-title { line-height: 1.6; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; height: 3.2em; margin-top: 1.6rem;}
.review_card .swiper-button-prev, 
.review_card .swiper-button-next {position: absolute;z-index: 1;top: 0;bottom: 0;margin: auto; width: 50px;}
.review_card .swiper-button-prev::before,
.review_card .swiper-button-next::before {background-color: rgba(0, 0, 0, 0.3);height: 50px;}

.swiper-button-prev::before,
.swiper-button-next::before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;content: "";border-radius: 50%;}
.review_card .swiper-button-prev::after, .review_card .swiper-button-next::after {border-color: #fff;font-size: 15px;}
.swiper-button-prev::after {margin: 5px 5px 1px 1px;-webkit-transform: rotate(0deg);transform: rotate(0deg);color: #fff;}
.swiper-button-prev::after, .swiper-button-next::after {content: "";border-width: 3px 3px 0 0;}
.swiper-button-next::after {margin: 5px 0px 1px 1px;-webkit-transform: rotate(0deg);transform: rotate(0deg);color: #fff;}
/* 「.swiper-button-next::after」を2回並べた同じ指定が続いていたが、
   1つ上の prev/next まとめ指定と中身が同じだったため削除した */
@media screen and (max-width: 768px) {
  .review-slider {width:95%;margin: 0 auto;}
}
.card03 .slide-content { padding:20px 8px;}
.card03 .slide-date { font-size: 14px; line-height: 1; display: block; color: #9e7ca3;}
.card03 .slide-title { line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; margin-top:10px; font-size: 14px; font-weight: lighter;}
.card03 .swiper-button-prev, .card03 .swiper-button-next {position: absolute;z-index: 1;top: 0;bottom: 0;margin: auto; width: 50px;}
.card03 .swiper-button-prev::before,
.card03 .swiper-button-next::before {background-color: rgba(0, 0, 0, 0.3);height: 50px;}
.card03 .swiper-button-prev::after, .card03 .swiper-button-next::after {border-color: #fff;font-size: 15px;}

/* お客様の声 */
.card03 .swiper {overflow: visible; padding: 0;} 
.card03 .slide {-webkit-transition: var(--transition), opacity 1s;transition: var(--transition), opacity 1s;border-radius: 4px;-webkit-box-shadow: var(--box-shadow);box-shadow:2px 3px 17px #dcdcdc;}
.card03 .swiper-slide:not(.swiper-slide-visible) { opacity: 0.3;pointer-events: none;}
.card03 .slide-media {padding-top: 62.5%;}
/* 上の .review_card と同じく、Sass の入れ子を通常のCSSに書き直したもの */
.card03 .swiper-slide:not(.swiper-slide-visible) .slide {pointer-events: none;opacity: 0.3;}
/* モーダル画像 */
.snsinfo .container .cards .card:hover {opacity: 0.8;}
.snsinfo .container .cards .card img {width: 100%;}
.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.8);display: none;z-index: 1000;}
.bigimg {position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);margin: 0 0 0 auto;}
#top .close-btn {color: #fff;font-size: 40px;position: absolute;right: 0px;top: 0;z-index: 1;width: 100%;height: 100vh;}
#top .close-btn a {color: #fff;text-decoration: none;position: absolute;right: 10px;top: 10px;}

/* お客様の声 */
.voice {width: 85%;margin: 0 0 0 auto;padding: 40px 0 90px 0;}
.voice .ttl {text-align: center;margin-bottom: 30px;}
.voice .cards {display: flex;justify-content: space-between;width: 95%;margin: 0 auto;}
.voice .cards .card {margin-bottom: 20px;width: 48%;border: 1px solid #c4abd4;padding: 5px;box-shadow: 0 0 8px gray;}
.voice .cards2 .card {width: 32%;}
.voice .cards .card .ttl {padding-bottom: 10px;position: relative;display: flex;justify-content: space-between;border-bottom: 1px solid #a46bca;text-align: left;margin: 0;}
.voice .cards .card .ttl .ttlTxt {width: 80%;padding: 0 5px 0 0;}
.voice .cards .card .ttl .img {width: 20%;}
.voice .cards .card .ttl p {font-size: 11px;position: absolute;top: -5px;left: -9px;background-color: #a46bca;color: #fff;padding: 2px 7px;transform: rotate(-8deg);line-height: 1.2;}
.voice .cards .card .ttl h3 {margin-top: 30px;font-weight: bold;}
.voice .cards .card .txt {padding: 5px 0 10px 0;}

/* gallery */
.gallary {padding: 80px 0;}
.gallary .card {height: 250px;overflow: hidden; width: 32%!important;}
.gallary .card img {height: 100%;}
/*-------------------------------chara-------------------------------*/
.story {color: #fff;padding: 8% 0%;position: relative;background-image: url(../img/bg-chara02.jpg);width: 100%;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.story::before {content: "";background-color: rgba(0, 0, 0, 0.7);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.story .container {width: 85%;margin: 0 0 0 auto;}
.story .ttl {text-align: center;}
.story .ttl h2 {color: #fff;position: relative;}
.story .ttl h2::after {border: solid 1px #fff;}
.story .txt {padding: 4% 0 0 0%;width: 80%;margin: 0 auto;position: relative;}
.story .txt h3 {position: relative;z-index: 1;font-size: 2.5vw;margin-bottom: 5%;}
.story .txt h3 span {font-size: 1.5vw;}
.story .txt .h3 {color: #c7bfae;font-size: 8vw;position: absolute;top: -20%;left: -8%;z-index: 0;line-height: 1;}
.story .txt p {margin-bottom: 3%; font-size: 15px;}
.story .txt .pur {color: #c7bfae;font-size: 4vw;position: absolute;bottom: -11%;right: -8%;z-index: 0;line-height: 1;}

/* =========================================
   トップページ：コラム（最新3件）
   見出しの h2 とその下線は #top .ttl h2 の共通スタイルがそのまま効く
   ========================================= */
.top-column {padding: 80px 0;background-color: #f7f5f9;}
.top-column .container {width: 85%;max-width: 1200px;margin: 0 0 0 auto;}
.top-column .ttl {text-align: center;margin-bottom: 50px;}
.top-column .ttl p {font-size: 15px;}
.top-column__cards {display: flex;justify-content: space-between;flex-wrap: wrap;}
.top-column__card {width: 31%;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.top-column__link {display: block;height: 100%;color: #333;transition: 0.3s;}
.top-column__link:hover {opacity: 0.8;}
.top-column__img {height: 200px;overflow: hidden;}
.top-column__img img {width: 100%;height: 100%;object-fit: cover;}
.top-column__date {font-family: futura-pt, sans-serif;font-size: 13px;padding: 15px 20px 0 20px;}
.top-column__title {font-size: 16px;line-height: 1.8;padding: 5px 20px 20px 20px;}
.top-column__more {text-align: center;margin-top: 40px;}
.top-column__more a {display: inline-block;border: solid 1px #664994;color: #664994;font-size: 14px;padding: 12px 40px;transition: 0.3s;}
.top-column__more a:hover {background-color: #664994;color: #fff;}

/*-------------------------------menu-------------------------------*/
.product {width: 85%;margin: 0 0 0 auto;}
.product .ttl {text-align: center;padding-top: 5%;margin-bottom: 8%;}
.product .card {margin-bottom: 10%;}
.product .imgtxt {display: flex;justify-content: space-between;margin-bottom: 2%;}
.product .imgtxt .img {width: 50%;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.sparkonly .card1 .imgtxt .img {background-image:inherit;}
.sparkonly .card2 .imgtxt .img {background-image: inherit ;}
.product .imgtxt .txt {width: 50%;padding: 0 5% 0 5%;}
.product .imgtxt .txt h3 {font-size: 17px;position: relative;margin-bottom: 3%;}
.product .imgtxt .txt .tax {font-size: 15px;position: relative;margin-bottom: 15%;}
.product .imgtxt .txt .tax::after {position: absolute;top: 140%;content: " ";border-bottom: solid 1px #a563c3;display: block;width: 150%;}
.product .imgtxt .txt .tax span {font-size: 11px;display: block;line-height: 1.25;}
.product .imgtxt .txt table {width: 100%;line-height: 2;margin-bottom: 8%;text-align: left;}
.product .imgtxt .txt table th {width: 30%;}
.product .imgtxt .txt table tr {width: 70%;margin: 0;}
.product .card2 .imgtxt .txt .tax::after {right: 0%;}
.product .ShopMore {display: block;width: 50%;margin: 0 auto;border: 1px solid #111;color: #111;text-align: center;padding: 5px 20px;min-width: 140px;letter-spacing: 1px;position: relative;-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}
.product .imgtxt .txt .caution {font-size: 12px;margin-top: 20px;}
.product .news {font-size: 14px;text-align: right;padding: 3%;}
.product .comming {color: firebrick;text-align: center;}

.ttl-sns {margin-top: 20%;text-align: left !important;}

/* topお知らせ */
.top_news { max-width: 1200px; width: 85%; padding:85px 0 35px 0; margin:0 0 0 auto;}
.top_news .articles{width: 90%; margin: 0 auto;}
.top_news article{margin-bottom: 20px;}
.top_news .ttl h2{font-size: 25px; text-align: center;}
.top_news .ttl h3{font-size: 15px; font-family: serif;}
.top_news dt{font-family: futura-pt; font-size: 13px;}
.top_news dd{margin: 0; font-size: 15px;}

/* readmore  */
.more{width: 190px; border-bottom: 1px solid #444; margin: 50px 0; }
.more a{font-size: 13px;}

.Collabo{width: 85%; padding:85px 0 35px 0; margin:0 0 0 auto;}
.Collabo .container{width: 96% ; margin: 0 auto;}
.Collabo .cards{display: flex; justify-content: space-between;}
.Collabo .cards .card{width: 30%;position: relative;overflow: hidden; border-radius: 15px;box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);}
.Collabo .cards .card::before{content: "";padding-top: 177%;display: block;}

.Collabo .cards .card img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover; position: absolute;}
.Collabo .cards .card .txt{position: absolute; bottom: 0; left: 3%;}
.Collabo .cards .card .txt h3{color: #fff;}
/* =========================================
   一覧ページ共通（コラム／お知らせ／お客様の声／飲めるお店／商品／レシピ／メディア掲載／Q&A）
   以前は一覧ごとに別々のCSSが書かれ、カードの形も余白も書体も揃っていなかった。
   ここに1組だけ定義し、全ての一覧ページで同じ部品を使う。
   幅85%・右寄せは、左に固定表示しているヘッダー（15%）を避けるための既存の作り。
   ========================================= */
.pr-page {width: 85%;margin: 0 0 0 auto;padding: 55px 0 100px 0;font-family: var(--pr-font-serif);}

/* ページの見出し */
.pr-page__head {width: 90%;max-width: 720px;margin: 0 auto 60px auto;text-align: center;}
.pr-page__label {font-family: var(--pr-font-en);font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;color: var(--pr-purple-400);margin-bottom: 16px;line-height: 1;}
.pr-page__ttl {font-family: var(--pr-font-serif);font-size: 32px;line-height: 1.5;letter-spacing: 0.04em;color: var(--pr-purple-700);font-weight: normal;}
/* 見出し下の短い罫。既存サイトの見出し飾り（幅55px）をそのまま引き継いでいる */
.pr-page__ttl::after {content: "";display: block;width: 55px;margin: 22px auto 0 auto;border-top: solid 1px var(--pr-purple-600);}
.pr-page__lead {margin-top: 24px;font-size: 15px;line-height: 1.95;color: var(--pr-ink);}

/* 一覧の本体。サイドバーを置く一覧だけ --side を足す */
.pr-page__body {width: 92%;max-width: var(--pr-content);margin: 0 auto;}
.pr-page__body--side {display: flex;justify-content: space-between;align-items: flex-start;gap: 50px;}
.pr-page__main {flex: 1;min-width: 0;}

/* カードの並び。段数はクラスで切り替える */
.pr-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 45px 30px;}
.pr-cards--2 {grid-template-columns: repeat(2, 1fr);}
/* サイドバーがある一覧は横幅が狭くなるので、3列だとカードが窮屈になる。2列に落とす */
.pr-page__body--side .pr-cards {grid-template-columns: repeat(2, 1fr);}

/* カード1枚。カテゴリーのリンクを別に置くため、カード全体は<a>で包まず、
   写真とタイトルにそれぞれリンクを張っている（リンクの中にリンクは置けないため） */
.pr-card__img {display: block;aspect-ratio: 3 / 2;overflow: hidden;background-color: var(--pr-purple-50);margin-bottom: 18px;border-radius: var(--pr-radius);}
.pr-card__img:hover {opacity: 1;}
.pr-card__img img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.7s ease;}
.pr-card:hover .pr-card__img img {transform: scale(1.05);}
.pr-card__meta {display: flex;align-items: center;flex-wrap: wrap;gap: 12px;margin-bottom: 12px;}
.pr-card__date {font-family: var(--pr-font-en);font-size: 12px;letter-spacing: 0.06em;color: var(--pr-ink-mute);line-height: 1;}
.pr-card__cat a {display: inline-block;font-family: var(--pr-font-sans);font-size: 11px;line-height: 1;letter-spacing: 0.04em;color: var(--pr-purple-600);background-color: var(--pr-bg);border: solid 1px var(--pr-purple-200);border-radius: 2px;padding: 5px 8px;transition: 0.25s;}
.pr-card__cat a:hover {opacity: 1;background-color: var(--pr-purple-100);}
.pr-card__ttl {font-family: var(--pr-font-serif);font-size: 16px;line-height: 1.75;font-weight: normal;}
.pr-card__ttl a {color: var(--pr-ink);transition: 0.25s;}
.pr-card__ttl a:hover {opacity: 1;color: var(--pr-purple-600);}
.pr-card__excerpt {margin-top: 12px;font-family: var(--pr-font-sans);font-size: 13px;line-height: 1.85;color: var(--pr-ink-mute);}
/* 商品一覧の価格 */
.pr-card__price {margin-top: 10px;font-family: var(--pr-font-en);font-size: 15px;letter-spacing: 0.04em;color: var(--pr-purple-600);}

/* 店舗カード。住所・電話・定休日といった情報が続くので枠で囲んでひとかたまりに見せる */
.pr-card--info {border: solid 1px var(--pr-line);border-radius: var(--pr-radius);overflow: hidden;background-color: var(--pr-bg);transition: 0.3s;}
.pr-card--info:hover {box-shadow: var(--pr-shadow-hover);}
.pr-card--info .pr-card__img {margin-bottom: 0;border-radius: 0;}
.pr-card--info .pr-card__body {padding: 20px 20px 22px 20px;}
.pr-card--info .pr-card__ttl {font-size: 17px;margin-bottom: 12px;}
.pr-card__genre {display: flex;flex-wrap: wrap;gap: 6px;margin-bottom: 12px;}
.pr-card__genre a {font-family: var(--pr-font-sans);font-size: 11px;line-height: 1;color: var(--pr-purple-600);border: solid 1px var(--pr-purple-200);border-radius: 2px;padding: 5px 8px;}
.pr-card__address {font-family: var(--pr-font-sans);font-size: 13px;line-height: 1.8;color: var(--pr-ink-mute);margin-bottom: 12px;}
.pr-card__data {font-family: var(--pr-font-sans);display: flex;font-size: 13px;line-height: 1.8;margin: 0 0 6px 0;}
.pr-card__data dt {width: 74px;flex-shrink: 0;color: var(--pr-ink-mute);}
.pr-card__data dt i {padding-right: 6px;color: var(--pr-purple-300);}
.pr-card__data dd {margin: 0;flex: 1;}
.pr-card__data dd a {color: var(--pr-purple-600);}

/* 年表型のリスト（メディア掲載情報）。写真がないので日付と見出しだけを罫線で区切る */
.pr-list {border-top: solid 1px var(--pr-line);}
.pr-list__item {display: flex;gap: 30px;padding: 24px 4px;border-bottom: solid 1px var(--pr-line);}
.pr-list__date {font-family: var(--pr-font-en);font-size: 13px;letter-spacing: 0.06em;color: var(--pr-ink-mute);width: 110px;flex-shrink: 0;padding-top: 4px;}
.pr-list__body {flex: 1;min-width: 0;}
.pr-list__ttl {font-family: var(--pr-font-serif);font-size: 16px;line-height: 1.7;font-weight: normal;}
.pr-list__link {margin: 8px 0 0 0;font-family: var(--pr-font-sans);font-size: 13px;}
.pr-list__link a {color: var(--pr-purple-600);text-decoration: underline;}

/* 記事が無いときの表示 */
.pr-empty {padding: 60px 0;text-align: center;font-size: 15px;color: var(--pr-ink-mute);}

/* ページ送り */
.pr-pager {margin-top: 70px;text-align: center;font-family: var(--pr-font-en);}
.pr-pager .page-numbers {display: inline-flex;align-items: center;justify-content: center;min-width: 40px;height: 40px;padding: 0 12px;margin: 0 4px 8px 4px;font-size: 14px;letter-spacing: 0.04em;color: var(--pr-purple-600);border: solid 1px var(--pr-line);border-radius: var(--pr-radius);transition: 0.25s;}
.pr-pager a.page-numbers:hover {opacity: 1;background-color: var(--pr-purple-100);border-color: var(--pr-purple-200);}
.pr-pager .page-numbers.current {background-color: var(--pr-purple-600);border-color: var(--pr-purple-600);color: #fff;}
.pr-pager .page-numbers.dots {border-color: transparent;}

/* =========================================
   記事ページ共通（コラム／お知らせ／お客様の声／レシピ／Q&A／固定ページ）
   以前は記事の種類ごとに別々のCSSがあり、しかもその大半がスマホ用の
   指定の中にしか書かれていなかったため、PCでは効いていないものが多かった。
   ここに1組だけ定義し、全ての記事ページで同じ本文デザインを使う。
   ========================================= */
.pr-article {width: 100%;max-width: var(--pr-article);margin: 0 auto;font-family: var(--pr-font-serif);}

/* 本文の下に続くCTA・関連記事・戻るボタンも、本文と同じ幅に揃える */
.pr-page__main > .column-cta,
.pr-page__main > .pr-related,
.pr-page__main > .pr-back,
.pr-page__body > .column-cta,
.pr-page__body > .pr-related,
.pr-page__body > .pr-back {max-width: var(--pr-article);margin-left: auto;margin-right: auto;}

/* パンくず */
.pr-article__crumbs {font-family: var(--pr-font-sans);font-size: 12px;line-height: 1.8;color: var(--pr-ink-mute);margin-bottom: 28px;}
.pr-article__crumbs a {color: var(--pr-purple-600);}

/* 記事の見出し部分 */
.pr-article__head {margin-bottom: 36px;}
.pr-article__meta {display: flex;align-items: center;flex-wrap: wrap;gap: 12px;margin-bottom: 16px;}
.pr-article__date {font-family: var(--pr-font-en);font-size: 13px;letter-spacing: 0.06em;color: var(--pr-ink-mute);line-height: 1;}
.pr-article__cat a {display: inline-block;font-family: var(--pr-font-sans);font-size: 11px;line-height: 1;color: var(--pr-purple-600);border: solid 1px var(--pr-purple-200);border-radius: 2px;padding: 5px 8px;}
.pr-article__ttl {font-family: var(--pr-font-serif);font-size: 30px;line-height: 1.55;letter-spacing: 0.02em;font-weight: normal;color: var(--pr-purple-900);}
.pr-article__thumb {margin-top: 32px;border-radius: var(--pr-radius);overflow: hidden;}
.pr-article__thumb img {width: 100%;height: auto;display: block;}

/* -----------------------------------------
   本文。ここから下は WordPress の本文が出力する要素をそのまま整える
   ----------------------------------------- */
.pr-article__body {font-size: 16px;line-height: 1.95;color: var(--pr-ink);}
.pr-article__body p {font-size: 16px;line-height: 1.95;margin: 0 0 24px 0;}
.pr-article__body a {color: var(--pr-purple-600);text-decoration: underline;text-underline-offset: 3px;}

/* 見出し。h2は左の縦線で章の始まりを示し、h3は下線だけの軽い区切りにする */
.pr-article__body h2 {font-size: 22px;line-height: 1.6;font-weight: normal;color: var(--pr-purple-900);background-color: var(--pr-purple-50);border-left: solid 4px var(--pr-purple-600);padding: 16px 20px;margin: 64px 0 26px 0;border-radius: 0 var(--pr-radius) var(--pr-radius) 0;}
.pr-article__body h3 {font-size: 18px;line-height: 1.7;font-weight: normal;color: var(--pr-purple-800);border-bottom: solid 1px var(--pr-line);padding-bottom: 12px;margin: 48px 0 20px 0;}
.pr-article__body h4 {font-size: 17px;line-height: 1.7;font-weight: bold;color: var(--pr-ink);margin: 36px 0 14px 0;padding-left: 16px;position: relative;}
/* 社名の「雫」に由来する小さな菱形。サイト共通の飾りとして使う */
.pr-article__body h4::before {content: "";position: absolute;top: 0.62em;left: 0;width: 6px;height: 8px;background-color: var(--pr-purple-300);border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}

/* 箇条書き。以前は青い破線の枠だったが、紫の細い縦線に変えて本文と地続きに見せる */
.pr-article__body ul,
.pr-article__body ol {background-color: var(--pr-purple-50);border-left: solid 2px var(--pr-purple-200);padding: 26px 26px 26px 46px;margin: 28px 0 32px 0;border-radius: 0 var(--pr-radius) var(--pr-radius) 0;}
.pr-article__body ul {list-style: disc;}
.pr-article__body ol {list-style: decimal;}
.pr-article__body li {font-size: 15px;line-height: 1.9;margin-bottom: 10px;}
.pr-article__body li:last-child {margin-bottom: 0;}
.pr-article__body li::marker {color: var(--pr-purple-400);}
/* 画像ブロックの中のリストは飾らない（囲みが二重になるため） */
.pr-article__body figure ul,
.pr-article__body figure ol {background-color: transparent;border: none;padding: 0;margin: 0;}

/* 画像・動画 */
.pr-article__body img {height: auto;border-radius: var(--pr-radius);}
/* YouTubeなどの埋め込み。画面幅に合わせて縦横比を保ったまま縮む */
.pr-article__body iframe {display: block;width: 100%;aspect-ratio: 16 / 9;height: auto;border: none;margin: 32px 0;border-radius: var(--pr-radius);}
.pr-article__body .wp-block-embed__wrapper {margin: 32px 0;}
.pr-article__body .wp-block-embed__wrapper iframe {margin: 0;}
.pr-article__body figure {margin: 32px 0;}
.pr-article__body figcaption {font-family: var(--pr-font-sans);font-size: 12px;line-height: 1.7;text-align: center;color: var(--pr-ink-mute);margin-top: 10px;}
/* 既存の記事本文で使われている指定。写真の向きと撮影クレジット */
.pr-article__body img.portrait {display: block;width: 60%;margin: 0 auto;}
.pr-article__body img.landscape {width: 100%;}
.pr-article__body .credit p {font-family: var(--pr-font-sans);font-size: 12px;text-align: center;letter-spacing: 0.05em;color: var(--pr-ink-mute);margin: 0;}

/* 引用 */
.pr-article__body blockquote,
.pr-article__body .wp-block-quote {background-color: var(--pr-bg-soft);border-left: solid 3px var(--pr-purple-300);margin: 32px 0;padding: 24px 26px;font-size: 15px;}
.pr-article__body blockquote p:last-child {margin-bottom: 0;}

/* 補足の囲み（本文中で class="pre" / class="point" を付けた箇所） */
.pr-article__body .pre {background-color: var(--pr-bg-soft);border: solid 1px var(--pr-line);border-radius: var(--pr-radius);padding: 22px 24px;margin: 28px 0 36px 0;font-size: 15px;}
.pr-article__body .pre p:last-child {margin-bottom: 0;}
.pr-article__body .point {border: solid 1px var(--pr-purple-200);border-top: solid 3px var(--pr-purple-600);border-radius: var(--pr-radius);padding: 22px 24px;margin: 28px 0 36px 0;}
.pr-article__body .point p:last-child {margin-bottom: 0;}

/* 表 */
.pr-article__body table {width: 100%;border-collapse: collapse;font-family: var(--pr-font-sans);font-size: 14px;margin: 28px 0 36px 0;}
.pr-article__body th,
.pr-article__body td {border: solid 1px var(--pr-line);padding: 13px 16px;text-align: left;line-height: 1.8;}
.pr-article__body th {background-color: var(--pr-purple-50);font-weight: bold;color: var(--pr-purple-800);}

/* 記事の下：タグと戻るリンク */
.pr-article__foot {margin-top: 50px;padding-top: 26px;border-top: solid 1px var(--pr-line);font-family: var(--pr-font-sans);font-size: 13px;color: var(--pr-ink-mute);}
.pr-article__tags i {color: var(--pr-purple-300);padding-right: 6px;}
.pr-article__tags a {color: var(--pr-purple-600);}
.pr-back {text-align: center;margin-top: 55px;}
.pr-back a {display: inline-block;font-family: var(--pr-font-sans);font-size: 14px;letter-spacing: 0.04em;color: var(--pr-purple-600);border: solid 1px var(--pr-purple-600);border-radius: var(--pr-radius);padding: 14px 40px;transition: 0.25s;}
.pr-back a:hover {opacity: 1;background-color: var(--pr-purple-600);color: #fff;}

/* 関連記事 */
.pr-related {margin-top: 70px;}
.pr-related__ttl {font-family: var(--pr-font-serif);font-size: 18px;font-weight: normal;letter-spacing: 0.04em;color: var(--pr-purple-700);border-bottom: solid 1px var(--pr-line);padding-bottom: 14px;margin-bottom: 28px;}
.pr-related__cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;}
.pr-related__card a {display: block;color: var(--pr-ink);}
.pr-related__card a:hover {opacity: 1;}
.pr-related__img {aspect-ratio: 3 / 2;overflow: hidden;background-color: var(--pr-purple-50);border-radius: var(--pr-radius);margin-bottom: 12px;}
.pr-related__img img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.7s ease;}
.pr-related__card a:hover .pr-related__img img {transform: scale(1.05);}
.pr-related__name {font-family: var(--pr-font-serif);font-size: 14px;line-height: 1.7;margin: 0;transition: 0.25s;}
.pr-related__card a:hover .pr-related__name {color: var(--pr-purple-600);}

/* =========================================
   Responsive: Tablet
   本文720px＋サイドバー280pxが横に並びきらない幅で、サイドバーを本文の下に回す
   ========================================= */
@media (max-width: 1180px) {
	.pr-page__body--side {display: block;}
	.pr-page__main {width: 100%;}
	.pr-page__body--side .pr-side {width: 100%;max-width: 720px;margin: 60px auto 0 auto;position: static;}
	.pr-cards {grid-template-columns: repeat(2, 1fr);}
}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
	/* 一覧ページ */
	.pr-page {width: 100%;margin: 0;padding: 30px 0 70px 0;}
	.pr-page__head {width: 88%;margin-bottom: 40px;}
	.pr-page__label {font-size: 11px;margin-bottom: 12px;}
	.pr-page__ttl {font-size: 24px;}
	.pr-page__ttl::after {margin-top: 18px;}
	.pr-page__lead {margin-top: 18px;font-size: 14px;line-height: 1.9;text-align: left;}
	.pr-page__body {width: 88%;}
	.pr-cards {grid-template-columns: repeat(2, 1fr);gap: 32px 18px;}
	.pr-card__img {margin-bottom: 12px;}
	.pr-card__meta {gap: 8px;margin-bottom: 8px;}
	.pr-card__ttl {font-size: 14px;line-height: 1.7;}
	/* 抜粋はスマホだと縦に伸びて一覧性が落ちるため隠す */
	.pr-card__excerpt {display: none;}
	/* 店舗カードは情報量が多いので、スマホでは1枚ずつ縦に並べる */
	.pr-cards--info {grid-template-columns: 1fr;gap: 22px;}
	.pr-cards--info .pr-card__ttl {font-size: 16px;}
	.pr-list__item {display: block;padding: 20px 2px;}
	.pr-list__date {width: auto;margin-bottom: 8px;padding-top: 0;}
	.pr-list__ttl {font-size: 15px;}
	.pr-pager {margin-top: 50px;}
	.pr-pager .page-numbers {min-width: 36px;height: 36px;padding: 0 9px;font-size: 13px;margin: 0 3px 8px 3px;}

	/* 記事ページ */
	.pr-article__crumbs {font-size: 11px;margin-bottom: 20px;}
	.pr-article__head {margin-bottom: 28px;}
	.pr-article__ttl {font-size: 22px;line-height: 1.6;}
	.pr-article__thumb {margin-top: 24px;}
	.pr-article__body {font-size: 15px;}
	.pr-article__body p {font-size: 15px;line-height: 1.9;margin-bottom: 20px;}
	.pr-article__body h2 {font-size: 19px;padding: 13px 16px;margin: 46px 0 20px 0;}
	.pr-article__body h3 {font-size: 17px;margin: 36px 0 16px 0;padding-bottom: 10px;}
	.pr-article__body h4 {font-size: 16px;margin: 28px 0 12px 0;}
	.pr-article__body ul,
	.pr-article__body ol {padding: 20px 18px 20px 36px;margin: 22px 0 26px 0;}
	.pr-article__body li {font-size: 14px;line-height: 1.85;}
	.pr-article__body blockquote,
	.pr-article__body .wp-block-quote {padding: 18px 18px;margin: 24px 0;font-size: 14px;}
	.pr-article__body .pre,
	.pr-article__body .point {padding: 18px 16px;margin: 22px 0 28px 0;font-size: 14px;}
	/* 表は横に長くなりがちなので、はみ出す分だけ横スクロールさせる */
	.pr-article__body table {display: block;overflow-x: auto;white-space: nowrap;font-size: 13px;}
	.pr-article__body th,
	.pr-article__body td {padding: 10px 12px;}
	.pr-article__foot {margin-top: 40px;font-size: 12px;}
	.pr-back {margin-top: 40px;}
	.pr-back a {width: 100%;max-width: 320px;padding: 14px 10px;}
	/* 関連記事はスマホでは横並びの小さいカードにする */
	.pr-related {margin-top: 50px;}
	.pr-related__cards {grid-template-columns: 1fr;gap: 0;}
	.pr-related__card {border-bottom: solid 1px var(--pr-line);}
	.pr-related__card a {display: flex;align-items: center;gap: 16px;padding: 16px 0;}
	.pr-related__img {width: 96px;flex-shrink: 0;margin-bottom: 0;}
	.pr-related__name {font-size: 14px;}
}

/* =========================================
   サイドバー（一覧・記事の横に置く欄）
   以前は aside のCSSがファイル内の3か所に分かれて書かれ、
   商品カードのボタンだけ別の色（#d2a2da）になるなどバラついていた。
   ここに1組にまとめ、色はすべてブランドの紫に揃えている。
   ========================================= */
.pr-side {width: 280px;flex-shrink: 0;font-family: var(--pr-font-sans);position: sticky;top: 20px;}
.pr-side__ttl {font-family: var(--pr-font-serif);font-size: 16px;font-weight: normal;letter-spacing: 0.04em;color: var(--pr-purple-700);text-align: center;margin: 40px 0 22px 0;}
.pr-side__ttl:first-of-type {margin-top: 0;}
.pr-side__ttl::after {content: "";display: block;width: 40px;margin: 14px auto 0 auto;border-top: solid 1px var(--pr-purple-300);}

/* カテゴリーなどの一覧 */
.pr-side__nav {margin-bottom: 40px;}
.pr-side__nav li {border-bottom: solid 1px var(--pr-line);}
.pr-side__nav a {display: block;font-size: 13px;line-height: 1.6;color: var(--pr-ink);padding: 12px 16px 12px 4px;position: relative;transition: 0.25s;}
.pr-side__nav a::after {content: "";position: absolute;top: 50%;right: 6px;width: 5px;height: 5px;margin-top: -3px;border-top: solid 1px var(--pr-purple-300);border-right: solid 1px var(--pr-purple-300);transform: rotate(45deg);transition: 0.25s;}
.pr-side__nav a:hover {opacity: 1;color: var(--pr-purple-600);}
.pr-side__nav a:hover::after {right: 2px;}

/* 商品カード */
.pr-side__card {border: solid 1px var(--pr-line);border-radius: var(--pr-radius);overflow: hidden;background-color: var(--pr-bg);margin-bottom: 24px;}
.pr-side__img {aspect-ratio: 3 / 2;overflow: hidden;background-color: var(--pr-purple-50);}
.pr-side__img img {width: 100%;height: 100%;object-fit: cover;}
.pr-side__body {padding: 16px 16px 18px 16px;}
.pr-side__name {font-family: var(--pr-font-serif);font-size: 14px;line-height: 1.6;text-align: center;margin: 0 0 6px 0;}
.pr-side__price {font-family: var(--pr-font-en);font-size: 18px;text-align: center;color: var(--pr-purple-600);margin: 0 0 14px 0;line-height: 1.4;}
.pr-side__price span {font-family: var(--pr-font-sans);font-size: 11px;padding-left: 3px;}
.pr-side__spec {width: 100%;font-size: 12px;line-height: 1.9;color: var(--pr-ink-mute);margin-bottom: 16px;}
.pr-side__spec th {text-align: left;font-weight: normal;white-space: nowrap;padding-right: 8px;vertical-align: top;}
.pr-side__spec td {text-align: left;}
.pr-side__lead {font-size: 13px;line-height: 1.85;color: var(--pr-ink);margin-bottom: 16px;}
.pr-side__btn {display: block;text-align: center;font-size: 14px;font-weight: bold;color: #fff;background-color: var(--pr-purple-600);border-radius: var(--pr-radius);padding: 13px 10px;transition: 0.25s;}
.pr-side__btn:hover {opacity: 1;background-color: var(--pr-purple-300);color: #fff;}
.pr-side__link {text-align: center;margin-top: 14px;}
.pr-side__link a {font-size: 13px;color: var(--pr-purple-600);text-decoration: underline;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
	.pr-side {width: 100%;}
	.pr-side__ttl {margin: 34px 0 18px 0;}
	/* スマホでは商品カードを2枚横に並べて、縦の長さを抑える */
	.pr-side__cards {display: grid;grid-template-columns: repeat(2, 1fr);gap: 14px;}
	.pr-side__card {margin-bottom: 0;}
	.pr-side__body {padding: 12px 12px 14px 12px;}
	.pr-side__name {font-size: 13px;}
	.pr-side__price {font-size: 16px;}
	.pr-side__spec {display: none;}
	.pr-side__btn {font-size: 13px;padding: 12px 6px;}
}

/* 飲めるお店・商品の一覧CSSは .pr-page / .pr-card--info に統合したため削除した */
#restaurant-single .container {padding: 5% 5% 10% 5%;width: 85%;margin: 0 0 0 auto;}
#restaurant-single .container .MainImg {margin-bottom: 25px;}
#restaurant-single .container .MainImg img {height: 300px;width: 100%;object-fit: cover;}
#restaurant-single .container .txt .name {margin-bottom: 20px;}
#restaurant-single .container .txt .site {border-top: 1px solid #cccaca;border-bottom: 1px solid #cccaca;padding: 13px 0;margin-bottom: 55px;}
#restaurant-single .container .txt .site ul li {display: inline-block;font-family: sans-serif;font-size: 12px;margin-right: 10px;color: #b2b2b2;}
#restaurant-single .container .txt .site ul li i {padding-right: 2px;color: #b2b2b2;}
#restaurant-single .container .txt .description {margin-bottom: 20px;}
#restaurant-single .container .txt .ttl {text-align: center;}
#restaurant-single .container .txt h2 {margin: 0 0 30px 0;}
#restaurant-single .container .txt p {margin-bottom: 10px; font-family: sans-serif;}
#restaurant-single .container .txt a{color: var(--pr-purple-600);}
#restaurant-single .container .txt .info {padding: 20px 0;}
#restaurant-single .container .txt dl {max-width: 800px;margin: 0 auto;font-family: sans-serif;display: flex;border-bottom: 1px solid #cccaca;padding: 18px 0;}
#restaurant-single .container .txt dl dt {width: 80px;font-weight: bold;}
#restaurant-single .container .txt dl dd {width: 70%;flex: 1;}
#restaurant-single .container .txt .imges {padding: 10px 0 20px 0;max-width: 800px;margin: 0 auto;}
#restaurant-single .container .txt .imges .inner .img {width: 31%;display: inline-block;margin: 0 2% 2% 0;height: 190px;}
#restaurant-single .container .txt .imges .inner .img:nth-of-type(3n) {margin-right: 0 !important;}
#restaurant-single .container .txt .imges .inner .img img {width: 100%;height: 100%;object-fit: cover;}
#restaurant-single .container .txt .site .tabelog:hover {color: #ffaa01;opacity: 1;}
#restaurant-single .container .txt .site .gurunavi:hover {color: #e51e00;opacity: 1;}
#restaurant-single .container .txt .site .facebook:hover {color: #3b5998;opacity: 1;}
#restaurant-single .container .txt .site .instagram:hover {color: #cf2e92;opacity: 1;}
#restaurant-single .container .txt .site .twitter:hover {color: #1da1f2;opacity: 1;}
#restaurant-single .container .txt .site .line:hover {color: #00b900;opacity: 1;}
#restaurant-single .container .txt .map {margin: 50px 0 30px 0;}
#restaurant-single .container .txt .map iframe {width: 100%;}
#restaurant-single .container .back {margin-bottom: 20px;}
#restaurant-single .container .back a {color: var(--pr-purple-600);margin-bottom: 15px;display: block;}
.acf-map {width: 100%;height: 400px;}
.acf-map img {max-width: inherit !important;}
/* モーダル画像 */
#restaurant-single .close-btn {color: #fff;font-size: 40px;position: absolute;right: 0px;top: 0;z-index: 1;width: 100%;height: 100vh;}
#restaurant-single .close-btn a {color: #fff;text-decoration: none;position: absolute;right: 10px;top: 10px;}

/* レシピ一覧・レシピ記事・メディア掲載情報のCSSは削除した。
   一覧は .pr-page、記事本文は .pr-article に統合している。
   レシピだけ丸ゴシック（a-otf-ud-shin-maru-go）を使っていたが、
   サイト内で1ページだけ書体が違う状態だったため、他ページと同じ明朝に揃えた */


/* =========================================
   Q&A一覧
   以前は開閉ボタンが置かれていたが、それを動かすJSがこのページには無く
   一度も開閉していなかった。質問と回答をそのまま並べる形にしている。
   ========================================= */
.pr-faq {border-top: solid 1px var(--pr-line);}
.pr-faq__item {border-bottom: solid 1px var(--pr-line);padding: 30px 4px;}
.pr-faq__q,
.pr-faq__a {display: flex;gap: 14px;}
.pr-faq__q {font-family: var(--pr-font-serif);font-size: 17px;line-height: 1.75;font-weight: normal;color: var(--pr-purple-800);margin-bottom: 16px;}
.pr-faq__a {font-family: var(--pr-font-sans);font-size: 14px;line-height: 1.95;color: var(--pr-ink);margin: 0;}
.pr-faq__mark {font-family: var(--pr-font-en);font-size: 17px;line-height: 1.6;flex-shrink: 0;color: var(--pr-purple-300);}
.pr-faq__a .pr-faq__mark {color: var(--pr-purple-600);}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
	.pr-faq__item {padding: 24px 2px;}
	.pr-faq__q {font-size: 15px;gap: 10px;}
	.pr-faq__a {font-size: 13px;gap: 10px;}
	.pr-faq__mark {font-size: 15px;}
}

/* === FAQ accordion（トップページの「よくある質問」で使用） === */
.qa .container{width: 85%;margin: 0 0 0 auto;}
.faq-acc{padding: 40px 0 90px 0;}
.faq-acc-item{width: 96%; margin: 0 auto; border:1px solid #e0e0e0;background:#fafafa;margin-bottom:1rem;}
.faq-acc-btn{display:flex;align-items:center;gap:.5em;width:100%;padding:1rem 1.25rem;background:none;border:none;text-align:left;font-weight:600;cursor:pointer;}
.faq-acc-btn:after{content:'▼';margin-left:auto;transition:.3s transform;}
.faq-acc-btn[aria-expanded=true]:after{transform:rotate(-180deg);}
.faq-acc-content{max-height:0;overflow:hidden;padding:0 1.25rem 0 3rem;}
.faq-acc-content.show{max-height:500px;padding:0 1.25rem 1rem 3rem;transition: 0.5s;}
.faq-acc-content p{margin:0;}



/*-------------------------------レスポンシブ-------------------------------*/
@media screen and (max-width: 768px) {
  p{font-size: 16px;}
  .sp {display: block !important;}
  .pc {display: none !important;}
  .ttl h1 {font-size: 6vw;}
  .ttl h2 {font-size: 6vw;}
  .breadcrumbs {width: 100%;margin: 0 auto 20px auto;}
  /* 話題性（同じ2行が「モーダル」の見出しの下にもう一度書かれていたので1つにまとめた） */
  .snsinfo .container {width: 100%;margin: 0 auto;}
  .snsinfo .container .cards .card {width: 48%;}
  /* モーダル */
  .bigimg {width: 85%;}

  .top_news {margin:0 auto;}
  .top_news .container {width:100%;margin:0 auto;}
  .top_news .articles {width: 100%;}
  .sale {width:90%;margin:0 auto;}
  /*------------------------------再販のお知らせ-------------------------------*/
  .resale {width: 100%;margin: 0;padding: 10% 0 0 0;}
  .resale2 {text-align: center;margin: 15px 0 0 0;}
  .resale2 a {color: #ff4500 !important;width: 100% !important;}
  aside {width: 100%;}
  /*-------------------------------news-------------------------------*/
  .news {width: 100%;margin: 0;padding: 5%;}
  .news .ttl {text-align: center;margin: 10% 0;}
  .news article {margin-bottom: 8%;}
  .news dl {display: inherit;}
  .news dl dt {margin-bottom: 5%;}
  .news dl dd {margin: 0;}
  .news dl dd h3 {margin-bottom: 3%;}
  /* 記事ページのスマホ指定は .pr-article 側にまとめたため、ここからは削除した。
     ここにあった約60行は article タグを対象にしていたが、実際のHTMLには
     article タグが無く、大半が効いていないCSSだった */

  /*-------------------------------concept-------------------------------*/
  .concept .imgtxt .txt .ttl {padding-bottom: 5%;}
  .concept .imgtxt {width: 100%;display: inherit;}
  .concept .imgtxt .txt {width: 100%; padding-bottom: 50px;}
  .concept .imgtxt .txt .container {width: 90%;}
  .concept .imgtxt .txt h3 {font-size: 20px;}
  .concept .imgtxt .txt .h3 {font-size: 90px;top: 17%;left: 0%;margin-bottom: 10%;}
  .concept .imgtxt .txt p {margin-bottom: 7%;line-height: 1.8;}

  /*-------------------------------story-------------------------------*/
  .story .container {margin: 0 auto;width: 95%;}
  .story .ttl {padding-bottom: 5%;}
  .story .txt {width: 100%;}
  .story .txt h3 {font-size: 6vw;}
  .story .txt h3 span {font-size: 4.5vw;}
  .story .txt .h3 {top: -8%;left: -2%;font-size: 17vw;}
  .story .txt p {font-size: 4vw;margin-bottom: 5%;line-height: 1.8;}
  .story .txt .pur {bottom: -6%;font-size: 6vw;}

  /* トップページ：コラム（最新3件）は縦積みにする */
  .top-column {padding: 50px 0;}
  .top-column .container {width: 90%;margin: 0 auto;}
  .top-column .ttl {margin-bottom: 30px;}
  .top-column__cards {display: block;}
  .top-column__card {width: 100%;margin-bottom: 20px;}
  .top-column__img {height: 180px;}
  .top-column__title {font-size: 4vw;}

  .gift {width: 100%;margin: 0 auto;padding:5% 0;}
  .gift .imgtxt {display: block;}
  .gift .imgtxt .txt {width: 100%;margin: 0 auto;}
  .gift .imgtxt .txt .inner-txt {width: 100%;position: static;top: 0;left: 0%;transform: translateY(0%) translateX(0%);-webkit-transform: translateY(0%) translateX(0%);}
  .gift .imgtxt .txt .gift-ttl {margin-bottom: 0%;}
  .gift .imgtxt .txt .gift-ttl h2 {font-size: 5vw;}
  .gift .imgtxt .txt .inner-txt p {margin-bottom: 8%;text-align: center;}
  .gift .items .cards .card {width: 49%;margin: 0 2% 30px 0;}
  .gift .items .cards .card:nth-of-type(3n) {margin-right: 2% !important;}
  .gift .items .cards .card:nth-of-type(2n) {margin-right: 0% !important;}
  .product {width: 95%;margin: 0 auto;}
  .product .ttl {padding-top:0%;margin-bottom: 5%;}
  .product .imgtxt {display: inherit;}
  .product .imgtxt .img {width: 100%;}
  .sparkonly .imgtxt .img {padding-top: 0;}
  .product .imgtxt .txt {width: 100%;padding: 1% 0;}
  .product .imgtxt .txt h3 {font-size:18px; margin: 8px 0; text-align: center;}
  .product .imgtxt .txt .tax {font-size: 15px; margin-bottom: 10px;text-align: center;}
  .product .imgtxt .txt .tax::after {width: 100%; position: inherit; }
  .product .imgtxt .txt table {font-size: 2vh;line-height: 1.8;}
  .product .imgtxt .txt table td {padding-left: 3%; font-size: 13px;}
  .product .imgtxt .txt table th {font-size: 13px;}
  .product .news {font-size: 2.7vw;text-align: right;padding: 3%;}

  .contact {padding: 8% 0 15% 0;}
  .contact .container {width: 95%;margin: 0 auto;}
  .contact .ttl {margin-bottom: 10%;}
  .contact .txt {padding: 3% 0 0 0%;width: 95%;text-align: center;}
  .contact .txt .jp h3 {font-size: 6vw;margin-bottom: 3%;}
  .contact .txt .jp ul {text-align: left;}
  .contact .txt .jp li {font-size: 4vw;line-height: 1.8;}
  /* .contact .txt .make は直後の指定に完全に上書きされていたので削除した */
  .contact .txt .jp,
  .contact .txt .make {width: 100%;margin: 0 auto 10% auto;}
  .contact .txt .i {display: none;}
  .contact .txt .w {display: none;}
  .contact .icons p {padding-left: 0%;}

  .voice {width: 95%;margin: 0 auto;}
  .voice .cards {display: block;}
  .voice .cards .card {width: 100%;}

  .gallary .container .cards {width: 100%;}
  .gallary .container .cards .card {width: 33.3%;height: 120px;margin-bottom: 0;}
  .qa .container {width: 96%;margin: 0 auto;}
  .Collabo { width: 96%; margin: 0 auto; padding-top: 0;}
  /*-------------------------------飲めるお店・買えるお店-------------------------------*/
  #restaurant-single .container .txt dl {font-size: 14px;}
  #restaurant-single .container .txt dl dd {line-height: 1.8;margin-left: 20px;}
  /* お店一覧のスマホ指定は .pr-cards--info 側にまとめたため、ここからは削除した */
  #restaurant-single .container {padding: 0;width: 95%;margin: 0 auto;}
  #restaurant-single .container .txt .site ul li {padding: 5px 0;font-size: 14px;}
  #restaurant-single .container .txt .imges .inner .img {width: 47%;height: 112px;}
  #restaurant-single .container .txt .imges .inner .img:nth-of-type(3n) {margin-right: 2% !important;}
  #restaurant-single .container .txt .imges .inner .img:nth-of-type(2n) {margin-right: 0 !important;}

  /* Q&A一覧とフッターのスマホ指定は、それぞれ .pr-faq / .pr-footer 側にまとめたため削除した */
}

/* サイドバーのCSSは .pr-side にまとめたため、ここにあった分は削除した */
.strikethrough {text-decoration: line-through;color: #999;}


/* =========================================
   「紫ワインとは」ページへの導線ボタン
   既定の .btn-shine は左右余白が6em固定のため、
   文言が長いとスマホで横にはみ出す。専用に余白を狭める。
   ========================================= */
.btn-shine--about a {padding: 0.9em 2.2em; max-width: 100%; font-size: 15px;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
	.btn-shine--about a {padding: 0.9em 1.6em; font-size: 14px;}
}

/* コラム専用に足していたCSSは、一覧が .pr-page、本文が .pr-article、
   サイドバーが .pr-side に統合されたため削除した */

/* =========================================
   コラム記事の下に置くCTA（購入・お取引の相談）
   読み終えた直後がいちばん気持ちが動くので、関連記事より前に置いている
   ========================================= */
.column-cta {margin: 70px 0 50px 0;padding: 36px 30px;background-color: var(--pr-purple-50);border: solid 1px var(--pr-line);border-radius: var(--pr-radius);font-family: var(--pr-font-sans);}
.column-cta__ttl {font-family: var(--pr-font-serif);font-size: 20px;font-weight: normal;letter-spacing: 0.04em;color: var(--pr-purple-700);text-align: center;line-height: 1.6;}
.column-cta__ttl::after {content: "";display: block;width: 55px;margin: 18px auto;border-top: solid 1px var(--pr-purple-600);}
.column-cta__lead {font-size: 14px;line-height: 1.9;text-align: center;margin: 0 0 28px 0;color: var(--pr-ink);}
.column-cta__items {display: flex;justify-content: space-between;flex-wrap: wrap;}
.column-cta__item {width: 48%;background-color: var(--pr-bg);border: solid 1px var(--pr-line);border-radius: var(--pr-radius);overflow: hidden;}
.column-cta__img {aspect-ratio: 3 / 2;overflow: hidden;}
.column-cta__img img {width: 100%;height: 100%;object-fit: cover;}
.column-cta__txt {padding: 18px 16px 20px 16px;text-align: center;}
.column-cta__name {font-family: var(--pr-font-serif);font-size: 15px;line-height: 1.6;margin: 0 0 6px 0;}
.column-cta__price {font-family: var(--pr-font-en);font-size: 19px;color: var(--pr-purple-600);margin: 0 0 6px 0;line-height: 1;}
.column-cta__spec {font-size: 12px;color: var(--pr-ink-mute);margin: 0 0 16px 0;}
.column-cta__btns {max-width: 420px;margin: 0 auto;}
.column-cta__btn {display: block;text-align: center;font-size: 15px;font-weight: bold;padding: 14px 10px;border-radius: var(--pr-radius);transition: 0.25s;}
.column-cta__btn--main {background-color: var(--pr-purple-600);color: #fff;}
.column-cta__btn--main:hover {opacity: 1;background-color: var(--pr-purple-300);color: #fff;}
.column-cta__btn--sub {background-color: var(--pr-bg);color: var(--pr-purple-600);border: solid 1px var(--pr-purple-600);margin-top: 12px;}
.column-cta__btn--sub:hover {opacity: 1;background-color: var(--pr-purple-100);color: var(--pr-purple-600);}
.column-cta__more {text-align: center;margin: 26px 0 0 0;}
.column-cta__more a {font-size: 14px;color: var(--pr-purple-600);text-decoration: underline;}

/* =========================================
   スマホの画面下に固定するボタン
   記事は縦に長く、途中で買いたくなっても最後までスクロールしないと
   出口がなかったため、常に押せる場所に置いておく
   ========================================= */
.sticky-cta {display: none;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
	.column-cta {margin: 50px 0;padding: 26px 18px;}
	.column-cta__ttl {font-size: 18px;}
	.column-cta__lead {font-size: 13px;text-align: left;}
	.column-cta__items {display: block;}
	.column-cta__item {width: 100%;margin-bottom: 20px;}
	.column-cta__img {height: 180px;}

	.sticky-cta {display: block;position: fixed;left: 0;bottom: 0;width: 100%;z-index: 200;padding: 8px 12px;background-color: rgba(255, 255, 255, 0.96);box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);}
	.sticky-cta__btn {display: block;text-align: center;font-size: 15px;font-weight: bold;color: #fff;background-color: var(--pr-purple-600);padding: 14px 10px;border-radius: var(--pr-radius);}
	/* 固定ボタンとフッターの重なり対策は .pr-footer__bottom 側に移した */
}

/* =========================================
   トップ：メインビジュアルの上に置くボタン
   背景とコピーは9秒周期で切り替わるが、このボタンは切り替わらない位置に置く。
   以前は最初のボタンが画面をかなりスクロールしないと出てこなかった
   ========================================= */
.mv-cta {position: absolute;left: 50%;bottom: 8%;transform: translateX(-50%);-webkit-transform: translateX(-50%);z-index: 2;display: flex;justify-content: center;gap: 15px;width: 90%;max-width: 560px;}
.mv-cta__btn {display: block;flex: 1;text-align: center;font-size: 15px;font-weight: bold;padding: 16px 10px;border-radius: 100vh;transition: 0.3s;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}
.mv-cta__btn--main {background-color: #a46bca;color: #fff;}
.mv-cta__btn--main:hover {background-color: #664994;color: #fff;}
.mv-cta__btn--sub {background-color: rgba(255, 255, 255, 0.92);color: #664994;}
.mv-cta__btn--sub:hover {background-color: #fff;color: #664994;}

/* =========================================
   トップ：業務用お取引のボタン
   以前は細い灰色の帯が縦に3本並ぶだけで、押せる場所だと気づかれにくかった
   ========================================= */
.sale .ttl .wholesale-lead {text-align: center;font-size: 15px;line-height: 1.9;margin-top: 15px;}
.wholesale-btns {display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;margin-top: 40px;}
.wholesale-btns__btn {display: block;width: 300px;text-align: center;font-size: 14px;font-weight: bold;color: #664994;background-color: #fff;border: solid 1px #664994;border-radius: 4px;padding: 16px 10px;transition: 0.3s;}
.wholesale-btns__btn:hover {background-color: #efe9f6;color: #664994;}
.wholesale-btns__btn--main {background-color: #664994;color: #fff;}
.wholesale-btns__btn--main:hover {background-color: #a46bca;color: #fff;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
	.mv-cta {bottom: 6%;width: 92%;gap: 10px;}
	.mv-cta__btn {font-size: 13px;padding: 14px 6px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);}

	.gift .ttl p {font-size: 13px;padding: 0 5%;text-align: left;}
	.gift .items .cards .card .txt .productName {font-size: 12px;}

	.sale .ttl .wholesale-lead {font-size: 13px;text-align: left;padding: 0 5%;}
	.wholesale-btns {display: block;margin-top: 30px;}
	.wholesale-btns__btn {width: 100%;max-width: 400px;margin: 0 auto 15px auto;}
}