@charset "UTF-8";
/* CSS Document */

/* -------------------------------------------- リセット -------------------------------------------- */

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:700;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* -------------------------------------------- 基本 -------------------------------------------- */

body {
	font-family: fot-tsukuardgothic-std,"游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
	color: black;
	font-size:15.5px;
	margin: 0;
	width:100%;
}

/* --------①（下→上）-------- */
.foo.delighter {
    transition: all .8s ease-in-out;
    transform: translateY(50px);
    opacity: 0;
 }
@media screen and (max-width:751px) {
	.foo.delighter { transform: translateY(5%); }
}

 .foo.delighter.started {
    transform: none;
    opacity: 1;
}


/* --------②（左→右）-------- */
.foo-2.delighter {
    transition: all .9s ease-in-out;
    transform: translateX(-40%);
    opacity: 0;
}
@media screen and (max-width:1100px) {
	.foo-2.delighter { transform: translateY(5%); }
}

 .foo-2.delighter.started {
    transform: none;
    opacity: 1;
}

/* --------③（右→左）-------- */
.foo-3.delighter {
    transition: all .9s ease-in-out;
    transform: translateX(40%);
    opacity: 0;
 }
@media screen and (max-width:1100px) {
	.foo-3.delighter { transform: translateY(5%); }
}

 .foo-3.delighter.started {
    transform: none;
    opacity: 1;
}

/* ---- storebtn（ついてくるストアボタン） ---- */
.fixed_btn{
    font-size:11.6px;
    letter-spacing:2px;
    position: fixed;
    bottom: 40px; 
    right: 40px;
    width:60px;
    height:60px;
    border-radius:50%;
    border:none;
	background-color:#B40404;
	background-image: linear-gradient(45deg, rgb(253, 1, 1) 0%, rgb(153, 3, 3) 100%);
    color:white;
	z-index:100;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	border-bottom: solid 3px #B40404;
	transition: .4s;
}
@media screen and (max-width: 751px) {
	.fixed_btn { font-size:10px; letter-spacing:0.5px; width:50px; height:50px; bottom:30px; right:20px;  }
}

.fixed_btn:hover {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}

.fixed_btn-img {
    width:30px;
    height:30px;
}
@media screen and (max-width: 751px) {
	.fixed_btn-img { width:25px; height:25px; }
}

.gokounyu {
	font-family: fot-tsukuardgothic-std, "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font: size 12.5px;
	letter-spacing:0;
	font-weight:bold;
	margin-top:-37px;
	color:#B40404;
	text-shadow:1px 1px white, -1px -1px white,1px -1px white, -1px 1px white,0px 1px white, 1px 0px white,-1px 0px white, 0px -1px white;
	width:50px;
	line-height:15px;
}
@media screen and (max-width: 751px) {
	.gokounyu { display:none; }
}

/* ---- （ついてくる先行予約バー） ---- */

.fixed_btn-senkou-bar-1 {
    bottom: 0; 
	right:0;
	left:0;
	margin:auto;
    width:100%;
    height:110px;
	background-color:#A9C40E;
	border: none;
    color:white;
	z-index:100;
	transition: .4s;
	opacity: 0.85;
	position: fixed;
}
@media screen and (max-width: 751px) {
	.fixed_btn-senkou-bar-1 { height:130px; }
}

.fixed_btn-senkou-bar-2 {
    bottom:20px; 
	right:0;
	left:0;
	margin:auto;
	z-index:200;
	position: fixed;
}

.fixed_btn-senkou-bar-img {
	width:300px;     /* ----  先行予約・注文受付中  : 380px  /  発売中 : 300px  ---- */
	position: absolute;
	bottom:-10px;    /* ---- 先行予約・注文受付中 : 0px  /  発売中 : -10px   ---- */
	right:200px;
	left:0;
	margin:auto;
}
@media screen and (max-width: 751px) {
	.fixed_btn-senkou-bar-img { width:230px; bottom:35px; right:0; }/* ----  先行予約・注文受付中  : width:310px; bottom:40px; /  発売中  : width:230px; bottom:35px; ---- */
}

.fixed_btn-senkou-bar-a {
	width:200px;     /* ---- 先行予約・注文受付中 : 160px  /  発売中 : 200px   ---- */
	position: absolute;
	bottom:40px;
	right:0;
	left:350px;     /* ---- 先行予約・注文受付中 : 420px  /  発売中 : 350px   ---- */
	margin:auto;
	border-radius: 60px;
	border:solid 1px white;
	padding:7px;
	vertical-align: middle;
	color:white;
	text-decoration: none;
	font-size:17px;
	font-family: fot-tsukuardgothic-std, "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
@media screen and (max-width: 751px) {
	.fixed_btn-senkou-bar-a { font-size:15px; width:38%; bottom:-3px; left:20px; padding:8px; margin:0; }
}
.fixed_btn-senkou-bar-a:hover {
	background-color: #45B035;
}

.fixed_btn-senkou-bar-b {
	width:200px;     /* ---- 先行予約・注文受付中 : 160px  /  発売中 : 200px   ---- */
	position: absolute;
	bottom:0px;
	right:0;
	left:350px;     /* ---- 先行予約・注文受付中 : 420px  /  発売中 : 350px   ---- */
	margin:auto;
	border-radius: 60px;
	border:solid 1px white;
	padding:7px;
	vertical-align: middle;
	color:white;
	text-decoration: none;
	font-size:17px;
	font-family: fot-tsukuardgothic-std, "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
@media screen and (max-width: 751px) {
	.fixed_btn-senkou-bar-b { font-size:15px; width:38%; left:auto; right:20px; bottom:-3px; padding:8px; margin:0; }
}
.fixed_btn-senkou-bar-b:hover {
	background-color: #45B035;
}



/* -------------------------------------------- 山形りんご・山形ラ・フランス -------------------------------------------- */ 
/* --------------------------- 基本 ---------------------------- */ 
.yfbody {
	color: #5A552D;
	background-color: white;
  font-family: fot-tsukuardgothic-std,"游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
	margin: 0; 
	padding:0;
	position: static;
	text-align: center;
	width:100%;
	margin-bottom:0;
}

/* ---------------------------- 共通 ---------------------------- */ 
.main {
	width:100%;
}

.main-img {
	width:100%;
}
@media screen and (max-width:1020px) {
	.main-img { display:none; }
}

.main-img-sp {
	width:100%;
}
@media screen and (min-width:1021px) {
	.main-img-sp { display:none; }
}


/* ----------------------------タブ ---------------------------- */ 

/* --- タブ見た目 --- */
.tabs{
  display:flex; 
  gap:20px; 
  padding:0; 
  margin-top:-80px;
  justify-content: center;
  height:80px;
}
@media screen and (max-width:757px) {
	.tabs { gap:15px; margin-top:-50px; height:55px; }
}

.tab{
  position:relative;
  border:none; 
  background:#fff; 
  color:#b8926c;
  font-weight:700; 
  font-size:23px; 
  line-height:1;
  padding:18px 28px; 
  cursor:pointer;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  width:400px;
  font-family: fot-tsukuardgothic-std,"游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width:757px) {
	.tab { font-size:14px; padding:8px 8px; width:46%; }
}

.tab.is-active {
  background: #fff9dd;
  color:#714704;
  box-shadow:
    -4px -4px 8px rgba(0,0,0,0.08),
     4px -4px 8px rgba(0,0,0,0.08);
  z-index: 3;
  position: relative;
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 5px;
  background: #fff9dd;
  z-index: 4;
}

.tab:focus-visible{ outline:3px solid #9ad0ff; outline-offset:2px; }

/* 左側に小さな赤いバッジ（任意） */
.tab-badge{
  display:inline-block; 
  font-size:15px; 
  color:#fff; 
  background:#be0821;
  padding:6px 8px 6px 10px; 
  border-radius:5px;
   margin-right:8px;
}
@media screen and (max-width:757px) {
	.tab-badge{ font-size:14px;  padding:2px 4px 2px 6px; display: block; width:50px; margin: 0 auto; margin-bottom:3px; }
}


/* --- パネル --- */
.tab-panels {
  position: relative;
  background: #fff9dd;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  top: -3px;      /* タブとつなげる */
  z-index: 2;
}
.tab-panel{ animation:fade .25s ease; background: #fff9dd;}
.tab-panel[hidden]{ display:block; height:0; overflow:hidden; padding:0; margin:0; }
@keyframes fade { from{opacity:.001; transform:translateY(4px)} to{opacity:1; transform:none} }





/* ----------------------------山形ラ・フランス ---------------------------- */ 
/* ================= キャッチコピー＆紹介文 ================== */
.pear-section {
  padding: 80px 0 100px;
  color: #714704;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
@media screen and (max-width:757px) {
	.pear-section{ padding: 50px 0 80px; }
}

/* リボン */
.ribbon1 {
  display: inline-block;
  position: relative;
  height: 90px;/*リボンの高さ*/
  line-height: 50px;/*リボンの高さ*/
  text-align: center;
  padding: 10px 30px;/*横の大きさ*/
  font-size: 18px;/*文字の大きさ*/
  background: #b01f24;/*塗りつぶし色*/
  color: #fff9dd;/*文字色*/
  box-sizing: border-box;
  width: 100%;
}
@media screen and (max-width:1020px) {
	.ribbon1 { width: 95%; height: 100px; padding: 10px 25px; }
}

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 45px 0px 45px 30px;
  border-color: transparent transparent transparent #fff9dd;
  border-style: solid;
}
@media screen and (max-width:1020px) {
	.ribbon1:before { border-width: 50px 0px 50px 20px; }
}

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 45px 30px 45px 0px;
  border-color: transparent #fff9dd transparent transparent;
  border-style: solid;
}
@media screen and (max-width:1020px) {
	.ribbon1:after { border-width: 50px 20px 50px 0px; }
}

.ribbon1-moji-1 {
	font-size:30px;
	font-weight: bold;
}
@media screen and (max-width:757px) {
	.ribbon1-moji-1 { font-size:23px; }
}

.ribbon1-moji-2 {
	font-size:16px;
	line-height: 1;
}
@media screen and (max-width:1020px) {
	.ribbon1-moji-2 { font-size:15px; }
}
@media screen and (max-width:757px) {
	.ribbon1-moji-2 { font-size:14px; }
}


/* ===== メインコンテンツ ===== */
.pear-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding-top:80px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
@media screen and (max-width: 1020px) {
  .pear-content {
    display:block;
    gap: 30px;
    padding-top:50px;
  }
}

/* ===== 左の画像 ===== */
.pear-img {
  position: relative;
  width: 50%;
}
@media screen and (max-width: 1020px) {
  .pear-img { width:90%; }
}

.pear-img img {
  width: 130%;
  height: auto;
  display: block;
  margin-left: -30%; 
  max-width: none; 
}
@media screen and (max-width: 1020px) {
  .pear-img img { width:100%; margin-left:0;  }
}

/* ===== 右のテキスト ===== */
.pear-text {
  width: 45%;
  text-align: left;
  padding-top:20px;
}
@media screen and (max-width: 1020px) {
  .pear-text { width:90%; padding-top:50px; margin: 0 auto;}
}

.copy-img {
 width: 100%;
 margin-bottom:30px;
}
@media screen and (max-width: 1020px) {
  .copy-img { width:80%;}
}
@media screen and (max-width: 757px) {
  .copy-img { width:100%;}
}

.pear-text p {
  line-height: 2;
  font-size: 16px;
  color: #714704;
  font-weight: bold;
  text-align: justify;
}

/* ===== ボタン ===== */
.pear-btn {
  display: inline-block;
  background: #72af2d;
  color: #fff;
  font-size: 18px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 40px;
  transition: 0.3s ease;
  width: 80%;
  padding-top:20px;
  padding-bottom:20px;
  text-align: center;
}
@media screen and (max-width: 1020px) {
  .pear-btn { width: 100%; }
}
.pear-btn:hover {
  background: #72af2d;
  transform: translateY(-2px);
}

.apple-btn {
  display: inline-block;
  background: #be0821;
  color: #fff;
  font-size: 18px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 40px;
  transition: 0.3s ease;
  width: 80%;
  padding-top:20px;
  padding-bottom:20px;
  text-align: center;
}
.apple-btn:hover {
  background: #be0821;
  transform: translateY(-2px);
}


/* ==================== ポイント ===================== */
.pt-sec-raf{
  position: relative;
  background:#84b924; 
  background-repeat: no-repeat;
  background-position: center bottom; 
  background-size: 100% auto;
  padding: 130px 0 120px; 
  background-image: 
  linear-gradient(to bottom, #84b924 0%, rgba(134,182,58,0) 60%),
  url("../img/yamagatafruit/raf-back.jpg");
  overflow: hidden;
  color:#714704;
  text-align: justify;
}
@media screen and (max-width: 1020px) {
  .pt-sec-raf { padding: 80px 0 80px;  }
}

.pt-sec-rin {
  position: relative;
  background-color: #be0821;
  background-image:
    linear-gradient(to bottom, #be0821 0%, rgba(223,5,38,0) 70%), /* ← 赤を70%まで延長 */
    url("../img/yamagatafruit/rin-back.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  padding: 130px 0 120px;
  overflow: hidden;
  color: #714704;
  text-align: justify;
}
@media screen and (max-width: 1020px) {
  .pt-sec-rin { padding: 80px 0 80px;  }
}

/* 右上の葉飾り（大きめ・上に食い込む） */
.pt-leaf{
  position:absolute;
  right:20px; 
  top:0;
  width:300px;
  height:auto;
  pointer-events:none;
  z-index:100;
}
@media screen and (max-width: 1020px) {
  .pt-leaf { width:230px; }
}
@media screen and (max-width: 757px) {
  .pt-leaf { width:150px; }
}

.pt-leaf-2{
  position:absolute;
  right:20px; 
  top:0;
  width:360px;
  height:auto;
  pointer-events:none;
  z-index:100;
}
@media screen and (max-width: 1020px) {
  .pt-leaf-2 { width:270px; }
}
@media screen and (max-width: 757px) {
  .pt-leaf-2 { width:190px; }
}


/* 左下の果物 */
.pt-fruit{
  position:absolute;
  left:-120px;
  bottom:-100px;
  width:400px;
  height:auto;
  pointer-events:none;
  z-index:100;
}
@media screen and (max-width: 1030px) {
  .pt-fruit { width:300px; bottom:-100px; left:10px; }
}
@media screen and (max-width: 757px) {
  .pt-fruit { width:200px; bottom:-60px; left:20px; }
}


/* 中身の最大幅と基準座標 */
.pt-inner{
  position: relative;
  width:100%;
  max-width: 1100px;
  margin: 0 auto;
  z-index:2;                           /* 帯より前面に見える */
}
@media screen and (max-width: 1030px) {
  .pt-inner { width:100%; }
}


/* 左上の “Point 01” */
.pt-label-raf{
	position: relative;
	left:50px;
	top:0;
	z-index: 100;
	width: 200px;
	text-align: center;
	  color:#0f6d2c;
}
@media screen and (max-width: 757px) {
  .pt-label-raf{ left:30px; width: 100px; }
}

.pt-label-rin{
	position: relative;
	left:50px;
	top:0;
	z-index: 100;
	width: 200px;
	text-align: center;
	  color:#00a73c;
}
@media screen and (max-width: 757px) {
  .pt-label-rin{ left:30px; width: 100px; }
}

.pt-word{
  display:block;
  font-weight:800;
  letter-spacing:.02em;
  font-size: 45px;
  font-family: poppins;
}
@media screen and (max-width: 1020px) {
  .pt-word{ font-size:25px; }
}

.pt-num{
  display:block;
  font-weight:800;
  line-height:1;
  font-size:120px;
  margin-top: 4px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing:3px;
}
@media screen and (max-width: 1020px) {
  .pt-num{ font-size:80px; }
}




/* 白いカード（左寄せ） */
.pt-card{
  position: relative;
  background:#fff;
  height: 660px;               /* ★固定高さ（デザインに合わせて調整） */
  padding: 0 80px;             /* 左右だけ余白。上下はflexで中央にする */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  top:-60px;
  z-index:1;

  display:flex;                /* テキストを縦中央へ */
  align-items:center;          /* ★上下中央 */
  overflow: visible;           /* 画像のはみ出しを許可 */
  margin-bottom:120px;
}
@media screen and (max-width: 1030px) {
 .pt-card{ padding: 30px 30px; }
}
@media screen and (max-width: 1020px) {
 .pt-card{ top:-40px; height: auto; display: block; padding: 50px 20px; width: 80%; margin: 0 auto; margin-bottom: 40px; }
}

.pt-card-2{
  position: relative;
  background:#fff;
  height: 750px;               /* ★固定高さ（デザインに合わせて調整） */
  padding: 0 80px;             /* 左右だけ余白。上下はflexで中央にする */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  top:-60px;
  z-index:1;

  display:flex;                /* テキストを縦中央へ */
  align-items:center;          /* ★上下中央 */
  overflow: visible;           /* 画像のはみ出しを許可 */
  margin-bottom:120px;
}
@media screen and (max-width: 1020px) {
 .pt-card-2{ top:-40px; height: auto; display: block; padding: 50px 20px; width: 80%; margin: 0 auto; margin-bottom: 40px; }
}

.pt-copy{
  width: 50%;                  /* 右に画像が来る前提の幅 */
  min-width: 320px;            /* つぶれ防止（任意） */
}
@media screen and (max-width: 1020px) {
.pt-copy{ width:90%; }
}

.pt-title{
  font-weight:800;
  line-height:1.6;
  font-size:32px;
  margin: 6px 0 16px;
  color:#725025;
}
@media screen and (max-width: 1020px) {
.pt-title{ font-size:25px;  margin: 6px 0 10px; }
}
.pt-desc{
  font-size:16px;
  line-height: 2.05;
  text-align: justify;
  text-underline-offset: 3px;          /* 下線の見え方を近づける */
  text-decoration-thickness: .05em;
}
@media screen and (max-width: 757px) {
.pt-desc{ width:95%; line-height: 1.8; }
}

/* 右の写真（白カードからはみ出す／右下寄り） */
.pt-photo{
  position: absolute;
  top: 50%;                    /* ★カードの上下中央 */
  transform: translateY(-50%); /* ★上下中央の仕上げ */
  right: -15%;                /* ★親幅を超えて右に出す（数値調整） */
  width: min(700px, 60%);      /* 画像の見え幅。比率でOK */
  margin: 0;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
  z-index: 3;
}
.pt-photo img{
  display:block;
  width:100%;
  height:450px;
  object-fit: cover;
}
@media screen and (max-width: 1020px) {
.pt-photo img{ height:350px; }
}
@media screen and (max-width: 757px) {
.pt-photo img{ height:250px; }
}

.pt-photo-2{
  position: absolute;
  top: 50%;                    /* ★カードの上下中央 */
  transform: translateY(-50%); /* ★上下中央の仕上げ */
  right: 50px;                /* ★親幅を超えて右に出す（数値調整） */
  width:40%;      /* 画像の見え幅。比率でOK */
  margin: 0;
  z-index: 3;
}
@media screen and (max-width: 1020px) {
.pt-photo-2{ position: static; width:100%; transform: none; margin-top:30px; }
}

.pt-photo-2 img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}


/* ===== レスポンシブ ===== */
@media (max-width: 1020px){
  .pt-sec{ padding: 60px 0 80px; }

  .pt-photo{
    position: relative;
    top: auto; right: auto;
    transform: none;
    width: 100%;
    margin-top: 16px;
  }
}





/* ---------------------------ストア ---------------------------- */ 

/* セクション */
.store-cta{
  padding: 80px 0 100px;
  color:#6e4d2a;
  background-color: #f2f2f3;
}
@media screen and (max-width: 757px) {
.store-cta{ padding: 50px 0 80px; }
}

.store-cta-title{
  text-align:center;
  font-size:25px;
  letter-spacing:.08em;
  margin-bottom:50px;
}
@media screen and (max-width: 757px) {
.store-cta-title{ font-size:20px;  line-height: 1.5; }
}
@media screen and (max-width: 757px) {
.store-cta-title span{ display: block; }
}

/* 2カラム */
.store-cta-grid{
  width:min(850px,92vw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

/* カード */
.p-card{
  background:#fff;
  padding: 40px 24px 40px;
  text-align:center;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.p-card:hover{
  border-color:#d7d7d7;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
/* 右カードにうっすらアクセント枠（画像に近い感じ） */
.p-card--accent{ border-color:#c9d6f6; }

/* サムネイル */
.p-thumb{
  height: 220px;               /* 画像を揃える */
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 25px;
}
.p-thumb img{
  max-height: 250px;
  width:auto; height:auto;
  display:block;
}

/* 商品名 */
.p-name{
  margin: 0 0 20px;
  font-weight:700;
  color:#6e4d2a;
  font-size: 18px;
}

/* ボタン */
.p-btn{
  display:inline-block;
  min-width: 260px;
  padding: 20px 18px;
  border-radius: 10px;
  color:#fff; text-decoration:none;

  font-size:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.p-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.16);
  opacity: .98;
}
.p-btn--green{ background:#72af2d; }
.p-btn--red{   background:#be0821; }

/* レスポンシブ（1カラム） */
@media (max-width: 1020px){
  .store-cta-grid{ gap: 20px; }
}

@media (max-width: 757px){
  .store-cta-grid{ grid-template-columns: 1fr; gap: 26px; }
  .p-thumb{ height: 200px; }
  .p-btn{ width: 85%; min-width: 0; }
}