/* =============================
========【ここだけ変更】========
============================= */

/* ↓ ここを作業する ↓ */

.content-inner {
/*商品掲載エリアの枠数を設定する（上限数：3枠）*/
  --枠数: 1fr;
    /*横方向に1枠だけ欲しい時：『1fr』
    　横方向に2枠欲しい時：『1fr 1fr』
    　横方向に3枠欲しい時：『1fr 1fr 1fr』*/

/*商品掲載エリアの枠の書式設定*/
  --エリアの枠線の太さ: 3px;
  --エリアの枠線の色: #029A9F;
  --エリアの背景の色: white;

/*商品掲載エリアの見出し帯の書式設定*/
  --見出しの背景色: #029A9F;
  --見出しの文字色: white;
  --見出しの枠線の色: white; /*枠線は上下のみ*/
  --見出しの枠線の太さ: 5px; /*枠線は上下のみ*/

/*商品名の書式設定*/
  --商品名の文字色: black;
  --注意事項の文字色: red; /*『お1人さまn点限り』等に使用*/

/*商品価格の書式設定*/
  --価格の文字色: black;

/*すべての商品を見るボタンの書式設定*/
  --すべてを見るの背景色: #029A9F;
  --すべてを見るの文字色: white;

/*TOPに戻るボタンの書式設定*/
  --TOPに戻るの背景色: #029A9F;
  --TOPに戻るの文字色: white;
}

/* ↑ ここまでで作業完了 ↑ */

/****************************************
********  ↓ ここから変更禁止 ↓  ********
****************************************/

 /*環境設定--------------------
-----------------------------------*/
img{
	vertical-align:top;
}

.content .side-content {
    display: none;
    /*カテゴリ一覧とかイオン東北のお客さまサイトやイオン東北eショップへのリンクとかの
	左側メニュー*/
}

 /*Container--------------------
-----------------------------------*/
.content-inner {
	/*max-width: 855px;*/
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 0 auto 30px;
}

.content-inner * {
	list-style: none;
	padding: 0;
	margin: 0;
}

.content-inner .content-inner__bnr {
	margin-bottom: calc(30 / 855 * 100%);
}

.content-inner .content-inner__content {
	margin-bottom: calc(50 / 855 * 100%);
}

.content-inner .content-inner__btn {
	width: calc(800 / 855 * 100%);
	margin: 0 auto;
}

.content-inner__product {
	display: grid;
	container-type: inline-size;
	grid-template-columns: var(--枠数); /*枠数は変数で管理*/
	row-gap: 15px; /*行間は15px*/
	column-gap: 10px; /*列間は10px*/
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: calc(40 / 855 * 100%);
}

.content-inner__product > li {
	border: var(--エリアの枠線の太さ) solid var(--エリアの枠線の色); /*商品掲載エリアの枠線の太さと色は変数で管理*/
	box-sizing: border-box;
	background-color: var(--エリアの背景の色); /*商品掲載エリアの背景色は変数で管理*/
	margin-bottom: calc(18 / 855 * 100%);
}

.content-inner__product > li:nth-of-type(n+5) {
	margin-bottom: 0;
}

.content-inner__product > li > a > img {
	width: 100%;
}

.content-inner__product__inner {
	padding: calc(20 / 420 * 100%);
}

.content-inner__product__plan {
    display: flex;
    align-items: center;             /* 縦中央 */
    justify-content: center;         /* 横中央 */
    font-size: clamp(18px, 2.6vw, 30px);  /*『clamp(最小, 理想, 最大)』で小さい画面ほど文字が小さくなる*/
    font-weight: 600;
    color: var(--見出しの文字色); /*商品掲載エリアの見出しの文字色は変数で管理*/
    background-color: var(--見出しの背景色); /*商品掲載エリアの見出しの背景色は変数で管理*/
    line-height: 1.2;                /* 1行前提の行間 */
    border-top: var(--見出しの枠線の太さ) solid var(--見出しの枠線の色); /*商品掲載エリアの見出しの枠線の太さと色は変数で管理（上側）*/
    border-bottom: var(--見出しの枠線の太さ) solid var(--見出しの枠線の色); /*商品掲載エリアの見出しの枠線の太さと色は変数で管理（上側）*/
    block-size: 55px;         /* ← 高さを固定（heightでもOK） */
}

.content-inner__product__plan > * {
    max-width: 100%;
    display: block;                  /* 高さ制御を安定させる */
    white-space: nowrap;             /* 改行しない＝1行モード */
    overflow: hidden;                /* はみ出しは非表示 */
    text-align: center;
}

.content-inner__product__name {
	font-size: 30px;
	font-weight: 600;
    color: var(--商品名の文字色); /*商品名の文字色は変数で管理*/
	line-height: 1.3;
	padding-top: calc(30 / 420 * 100%);
	margin-bottom: calc(15 / 420 * 100%);
}

.content-inner__product__name .notice {
	font-size: 25px;
	font-weight: 600;
    color: var(--注意事項の文字色); /*注意事項の文字色は変数で管理*/
	line-height: 1.3;
	padding-top: calc(30 / 420 * 100%);
	margin-bottom: calc(15 / 420 * 100%);
}

.content-inner__product__name .variety {
	font-size: 25px;
}

.content-inner__product__price {
	font-size: 25px;
	font-weight: 600;
    color: var(--価格の文字色); /*価格の文字色は変数で管理*/
	line-height: 1.3;
	text-align: right;
}

.content-inner__product__price .proper {
	font-size: 30px;
}

.content-inner__product__price .tax {
	font-size: 20px;
	font-weight: 400;
}

.content-inner__product__price .small {
	font-size: 18px;
}

.content-inner .content-inner__btn-all a{
    display: block;
    background-color: var(--すべてを見るの背景色); /*すべての商品を見るの背景色は変数で管理*/
    text-align: center;
    color: var(--すべてを見るの文字色); /*すべての商品を見るの文字色は変数で管理*/
    font-size: 40px;
    font-weight: 600;
	padding: calc(30 / 855 * 100%) 0;
	position: relative;
}

.content-inner .content-inner__btn-top a{
	display: block;
	background-color: var(--TOPに戻るの背景色); /*TOPへ戻るの背景色は変数で管理*/
	text-align: center;
	color: var(--TOPに戻るの文字色); /*TOPへ戻るの文字色は変数で管理*/
	font-size: 40px;
	font-weight: 600;
	padding: calc(30 / 855 * 100%) 0;
	position: relative;
}

.content-inner .content-inner__btn-top a::after{
	content: '';
	display: block;
	background: #ffffff;
	height: calc(80px / 2 * tan(20deg));
	width: 20px;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 30px;
}


/*-- --*/
@media screen and (max-width: 855px) {
	.content-inner {
		padding: 10px;
		margin-bottom: 20px;
	}

	.content-inner img {
		width: 100%;
		height: auto;
	}

	.content-inner .content-inner__pickup-ttl {
		font-size: 18px;
		padding: 0 50px;
	}
	
	.content-inner .content-inner__pickup-ttl::before,
	.content-inner .content-inner__pickup-ttl::after {
		width: 30px;
	}

    .content-inner__product__plan {
         /* 2行をきれいに収めるため、pxで行高・上下パディングを固定 */
         font-size: 18px;
         line-height: 22px;
         padding-block: 8px;      /* 上下の余白（8pxずつ） */
         /* block-size は 60px のまま固定 */
    }

    .content-inner__product__plan > * {
         white-space: normal;     /* 改行を許可 → 複数行可 */
         display: block;
         overflow: hidden;        /* 3行目以降は非表示（省略記号なし） */
         /* テキスト表示領域（高さ）は block-size − paddingの内側で自動クリップされる */
         /* 2行が確実に収まるように、行高と上下パディングの合計が60px内に収まる設計が重要 */
         overflow-wrap: anywhere; /* 連続英字も折り返す */
    }

	.content-inner__product__name{
         font-size: 19px
    }


	.content-inner__product__price {
		 font-size: 16px
	}

	.content-inner__product__price .proper {
		 font-size: 20px;
	}

	.content-inner__product__price .tax {
		 font-size: 14px;
	}

	.content-inner__product__price .small {
		 font-size: 12px;
	}

}