.page-nav {
	z-index: 3 !important;
}

.banner {
	position: relative;
	display: block;
	width: 264px;
	aspect-ratio: 270/204;
	padding: 6px 9px 3px;
	font-size: 1px;
	font-weight: 700;
	text-align: center;
	font-family: "GenEiMGothic2";
	background-color: transparent;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.banner > .wrapper {
	width: 100%;
	height: 100%;
}

.TopIconTitle {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 30%;
	padding-top: 1%;
	font-size: 36.5em;
	color: #F9EF03;
	background-color: #01FEFF;
	border: 2px solid #5C1C7D;
    border-bottom-width: 0 !important;
	border-radius: 8px 8px 0 0;
	z-index: 2;
}

.TopIconTitle:after {
	content: attr(data-text);
	position: absolute;
	z-index: -1;
	color: #662D98;
	-webkit-text-stroke: 0.14em #662D98;
	text-stroke: 0.14em #662D98;
}

.TopIconTitle2 {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 30%;
	padding-top: 2%;
	font-size: 28em;
	color: #F9EF03;
	background-color: #01FEFF;
	border: 2px solid #5C1C7D;
    border-bottom-width: 0 !important;
	border-radius: 8px 8px 0 0;
	z-index: 2;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.TopIconTitle2:after {
	content: attr(data-text);
	position: absolute;
	z-index: -1;
	color: #662D98;
	-webkit-text-stroke: 0.17em #662D98;
	text-stroke: 0.17em #662D98;
}

.TopIconTitle3 {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 30%;
	padding-top: 2%;
	font-size: 26em;
	color: #F9EF03;
	background-color: #01FEFF;
	border: 2px solid #5C1C7D;
    border-bottom-width: 0 !important;
	border-radius: 8px 8px 0 0;
	z-index: 2;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.TopIconTitle3:after {
	content: attr(data-text);
	position: absolute;
	z-index: -1;
	color: #662D98;
	-webkit-text-stroke: 0.17em #662D98;
	text-stroke: 0.17em #662D98;
}

.TopIconTitle_pk {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 30%;
	padding-top: 1%;
	font-size: 22em;
	color: #FFFFFF;
	background-color: #ff4ae5;
	border: 2px solid #5C1C7D;
    border-bottom-width: 0 !important;
	border-radius: 8px 8px 0 0;
	z-index: 2;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.TopIconTitle_pk:after {
	content: attr(data-text);
	position: absolute;
	z-index: -1;
	color: #FFFFFF;
	-webkit-text-stroke: 0.12em #FFFFFF;
	text-stroke: 0.12em #FFFFFF;
}

.content {
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;
	background-image: url('../images/top_icon/print_sct.webp') ; /*ポスター印刷*/
	background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;
	border: 2px solid #5C1C7D;
    border-top-width: 0 !important;
}

.content.wide {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/oban_icon.webp') ; /*大判印刷*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.tape {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/tape_icon.webp') ; /*タペストリー*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.gakkai {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/gakkai_icon.webp') ; /*学会*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.blf {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/blf_icon.webp') ; /*床ロゴマット*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.int {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/int_icon.webp') ; /*インタビューボード*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.roll {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/roll_icon.webp') ; /*ロールアップバナー*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.xbs {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/xbs_icon.webp') ; /*Xバナー*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.kanban {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/kanban_icon.webp') ; /*看板シート*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.mag {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/mag_icon.webp') ; /*マグネットシート*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.kirimoji {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/kirimoji_icon.webp') ; /*切り文字*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.car {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/car_icon.webp') ; /*車用カッティングシート*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.win {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/win_icon.webp') ; /*窓用カッティングシート*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.fls {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/fls_icon.webp') ; /*床用カッティングシート*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.wdb {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/wdb_icon.webp') ; /*ウエディングボード*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

.content.wfg {/*
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;*/
	background-image: url('../images/top_icon/wfg_icon.webp') ; /*ウエディングフラッグ*/
	/*background-position: 4% 55%;
	background-size: 61%;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0 0 8px 8px;*/
}

/*他のアイコンを追加する際はここから下に追記頂けば複製可能です


大判印刷のトップアイコンを複製する場合classを付与し、以下のプロパティ値を変更

.content.wide {
	background-image: url('../images/top_icon3.webp') ; 画像のパスを変更
	background-position: 4% 55%; 左端からの距離・上からの距離を調整
	background-size: 61%; 画像の大きさを調整
}



※商品名の縁取り文字は「ab240129」→「poster」→「index.html」の383行目にある
<div class="TopIconTitle" data-text="ポスター印刷">ポスター印刷</div>
のようにdate-text属性内の文字を本cssの49行目の記述で、二重に表示して表現しております。

そのため他のアイコンを複製する際はHTMLファイルのほうでdate-text属性も合わせて変更をお願いします。
例)<div class="TopIconTitle" data-text="大判印刷">大判印刷</div>
*/


.circleText {
	position: relative;
	left: 57.2%;
	width: 41%;
	height: 100%;
	font-size: 14px;
}

.circleText_pnk {
	position: relative;
	left: 57.2%;
	width: 41%;
	height: 100%;
	font-size: 14px;
}

/*Click here!!*/
.circleText div {
	position: absolute;
	top: 6.7%;
	left: 6%;
	width: 55%;
	aspect-ratio: 1/1;
	padding-top: 12%;
	line-height: 1;
	color: #FC0300;
	background-color: #F9EF03;
	border-radius: 360px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 1;
}

/*yubisashi*/
.circleText div:after {
	content: '';
	display: block;
	position: absolute;
	top: 44%;
	right: -63%;
	width: 74%;
	aspect-ratio: 399/305;
	background-image: url('../images/top_icon/yubisashi.webp');
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 2;
}

/*Click here!!*/
.circleText_pnk div {
	position: absolute;
	top: 6.7%;
	left: 6%;
	width: 55%;
	aspect-ratio: 1/1;
	padding-top: 12%;
	line-height: 1;
	color: #FC0300;
	background-color: #F9EF03;
	border-radius: 360px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 1;
}

/*yubisashi*/
.circleText_pnk div:after {
	content: '';
	display: block;
	position: absolute;
	top: 44%;
	right: -63%;
	width: 74%;
	aspect-ratio: 399/305;
	background-image: url('../images/top_icon/yubisashi.webp');
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 2;
}

/*詳細・ご注文はこちらから*/
.circleText p {
	position: absolute;
	bottom: 4.2%;
	width: 100%;
	aspect-ratio: 1/1;
	padding-top: 43%;
	font-size: 96%;
	line-height: 1.45;
	/* letter-spacing: -.3em; */
	color: #fff;
	font-weight: 500;
	background-color: #662D98;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 360px;
}

.circleText_pnk p {
	position: absolute;
	bottom: 4.2%;
	width: 100%;
	aspect-ratio: 1/1;
	padding-top: 32%;
	font-size: 96%;
	line-height: 1.45;
	/* letter-spacing: -.3em; */
	color: #fff;
	font-weight: 500;
	background-color: #ff4ae5;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 360px;
}

@media screen and (max-width: 650px){
	
	.banner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		aspect-ratio: 135/102;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.banner > .wrapper {
		width: 100%;
		max-width: 252px;
		height: 100%;
		max-height: 195px;
	}

	.TopIconTitle,
	.TopIconTitle2,
	.TopIconTitle3 {
		padding-top: 0;
		border-width: 0.4vw;
		border-radius: 2vw 2vw 0 0;
		  text-shadow    : 
       .35vw  .35vw 0 #5c1c7d,
      -.35vw  .35vw 0 #5c1c7d,
       .35vw -.35vw 0 #5c1c7d,
      -.35vw -.35vw 0 #5c1c7d,
       .35vw  0 0 #5c1c7d,
       0  .35vw 0 #5c1c7d,
      -.35vw  0 0 #5c1c7d,
       0 -.35vw 0 #5c1c7d;
	}

	.TopIconTitle:after,
	.TopIconTitle2:after,
	.TopIconTitle3:after
	 {
		content: none;
	}

	.content {
		border-width: 0.4vw;
		border-radius: 0 0 2vw 2vw;
	}

	.circleText p {
		padding-top: 45%;
	}

	.circleText_pnk p {
		padding-top: 45%;
	}
}

@media screen and (max-width: 590px){
	
	.banner {
		font-size: 0.178vw;
	}
}

@media screen and (max-width: 540px){

	.banner {
		height: auto;
		font-size: .175vw; 
		padding: 1.4%;
	}

	.banner > .wrapper {
		aspect-ratio: 135/102;
		margin: auto;
	}

	.circleText {
		font-size: 13em;
	}
	
	.circleText_pnk {
		font-size: 13em;
	}

}