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

.banner {
	    position: relative;
    display: block;
    width: 270px;
    height: 204px;
    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%;
	border: 2.8em solid #5C1C7D;
	border-radius: 10em;
}

.TopIconTitle {
	    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: 36.5em;
    color: #F9EF03;
    background-color: #01FEFF;
    border-radius: 8px 8px 0 0;
    z-index: 2;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.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-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-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-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;
}

.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.flg {
	display: block;
	width: 100%;
	height: 70%;
	background-color: #fff;
	background-image: url('../images/top_icon/flg_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: 44%;
    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: 44%;
    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 {
	    padding-top: 0;
		border-radius: 6px 6px 0 0;
	}

	.content {
		border-radius: 0 0 6px 6px;
	}
}

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

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

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

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

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

}

@font-face {
	font-family: "GenEiMGothic2";
	src: url("../fonts/GenEiMGothic2-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "GenEiMGothic2";
	src: url("../fonts/GenEiMGothic2-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}