/* =============================================================
完全データ入稿プラン　.product
============================================================= */
/* 共通
-------------------------------------------*/
/* リスト
----------------------------*/
/*　データ入稿プラン　*/
.flex-2{
	flex-wrap:wrap;
	gap:2rem 0;
}

/*　「価格について」　*/
.about-price{
	border:2px solid #9a7a62;
	border-radius:20px;
	padding:1.5rem 2rem;
	margin:2rem 3rem;
}

.article .about-price p{
	text-align:center;
	color:#9a7a62;
	font-size:1.5em;
	margin:0 0 1rem;
}

.about-price ul{
	display:flex;
	justify-content:center;
	align-items:center;
}


.about-price li:first-child{
	text-align:center;
	background-color:#e8a02d;
	border-radius:10px;
	padding:1rem 6rem;
	font-size:1.5em;
	color:#fff;
}

.about-price li:nth-child(2){
	font-size:1.5em;
	margin-left:0.7rem;
}

/*  注文について　*/
.step-img{
	text-align:center;
	margin-top:2rem;
}


/* プリントサイズ .print-size
----------------------------*/
/*  共通
--------------------*/
.print-size h4{
	background:#ebe4e0;
	border:none;
	text-align:center;
	padding:.8rem 0;
}
/* 枠 */
.print-size ul.wrapper{
	display:flex;
	flex-direction:row;
	flex-flow:wrap;
	gap:2rem;
	justify-content: space-between;
	align-items:stretch;
	text-align:center;
	padding-left:0;
}
.print-size ul.wrapper li{
	display:flex;
	flex-direction:column;
	gap:0.5rem;
	width:30%;
}
.print-size ul.wrapper li h3{
	text-align:left;
}
/* こんなときにおすすめ！ */
.print-size ul.wrapper li > *{
	flex-grow:1;
}
.print-size ul.wrapper li div p:first-of-type{
	font-weight:500;
	border-bottom:2.5px solid #aaa;
}
/* テンプレートダウンロードボタン */
.print-size ul.wrapper li a{
	border:3px solid #9a7a62;
	background:#fff;
	padding:.3rem;
	color:#9a7a62;
	text-decoration:none;
	margin-top:1rem;
	border-radius:10px;
	font-weight:500;
}
.print-size ul.wrapper li a:hover{
	background:#9a7a62;
	color:#fff;
	transition:.3s;
}
/* 注釈 */
p.annotation{
	margin-bottom:1rem;
	font-size:.75rem;
}
/*  DTFプリント（白のみ）
--------------------*/
/* 人気NO.1 */
.print-size ul.wrapper li:nth-of-type(2) figure{
	position:relative;
}
.print-size ul.wrapper li:nth-of-type(2) figure::before{
	position:absolute;
	content:"";
	background-image:url(https://maekake-order.com/wp/wp-content/uploads/2026/04/icon-badge.webp);
	background-size:contain;
	background-repeat:no-repeat;
	display:inline-block;
	width:25%;
	height:25%;
	top:0;
	right:1%;
}


/* タブ .tab
----------------------------*/
.print-size .example{
	margin-top:3rem;
}
.print-size .example .tab{
	display:flex;
	flex-wrap:wrap;
	margin:2rem 0;
}
.print-size .example .tab > label{
	flex: 1 1;
	order: -1;
	position: relative;
	min-width: 70px;
	padding: 0.7em 1em;
	background-color: #f2f2f2;
	color: #999;
	font-size: .9em;
	text-align: center;
	border-radius:10px 10px 0 0;
	cursor: pointer;
}
.print-size .example .tab > label:hover,
.print-size .example .tab label:has(:checked) {
	background-color:#644628;
	color: #fff;
	transition:0.3s;
}
.print-size .example .tab input {
	display: none;
}
.print-size .example .tab > div {
	display: none;
	width: 100%;
	padding: 1.5em 1em;
}
.print-size .example .tab label:has(:checked) + div {
	display: block;
}
.print-size .example .tab label p{
	font-weight:600;
}
/* タブコンテンツ .tab_contents
----------------------------*/
.print-size .example .tab_contents {
	border:1.5px solid #333;
}
.print-size .example .tab_contents p.annotation{
	text-align:right;
}
.print-size .example .tab_contents ul{
	padding-left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0;
	flex-wrap: wrap;
}
.print-size .example .tab_contents ul p{
	background:#9a7a62;
	padding:.8rem .3rem;
	color:#fff;
	text-align: center;
}
.print-size .example .tab_contents ul li{
	display:flex;
	flex-direction:column;
	gap:1rem;
	width:30%;
}

/*プリント位置を指定したい場合*/
.print-size .position{
	margin:3rem 0;
}
.print-size .position ul{
	padding-left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0;
	flex-wrap: wrap;
}
.print-size .position ul p{
	background:#9a7a62;
	padding:.8rem .3rem;
	color:#fff;
	text-align: center;
}
.print-size .position ul li{
	display:flex;
	flex-direction:column;
	gap:1rem;
	width:30%;
}




.print-shitei-list{
	display:flex;
	justify-content:space-between;
	margin:2rem 0;
}

.print-shitei-list .shitei-long{
	margin-bottom:1rem;
}

.print-shitei-list .shitei-sage{
	margin-bottom:2rem;
}

/*--------- データ作成上の注意 ----------------*/
/* 文字中央配置 */
.attention .center{
	text-align:center;
}

/*説明文の上下余白*/
.attention .txt{
	margin:0.5rem 0;
}

/*注意事項赤枠*/
.attention_red{
	border:1.5px solid var(--color-red);
	background-color:#f4e0df;
	padding:1.2rem 0;
	margin:1.5rem 0;
}
/*！作成前に必ずお読みください！のテキスト調整*/
.red_attention_txt{
	color:#ff0000;
	text-align:center;
}

/*見出し（オレンジ）*/
.attention_wrapper .back_heading_ora{
	font-size:1.1rem;
	text-align:left;
	font-weight:bold;
	background-color:#faf1ea;
	padding:0.8rem;
	padding-left:1rem;
	border-radius:5px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

/*注意点の各コンテンツの余白*/
.attention_wrapper{
	margin-bottom:2.5rem;
}
/*注意点の各コンテンツのデザイン・配置*/
.attention_img01, .attention_img02, .attention_img03, .attention_img04{
	background-color:#f4f6f6;
	padding:1rem;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	gap:0.2rem;
	align-items: center;
}
/*注意点：「その他」の個別で調整*/
.attention_img02 > *{
	flex:1;
}
/*注意点：「その他」の個別で調整*/
.attention_img06{
	display:flex;
	flex-direction:column;
	gap:0.5rem;
	justify-content:left;
	background-color:#f4f6f6;
	padding:2rem;
}
.attention_other1{
	font-weight:550;
}
/*================================================
特殊効果について*/
/*注意点：「特殊効果について」の個別で調整(::768px)*/
.attention_img05{
	background-color:#f4f6f6;
	padding:2rem;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items: flex-start;
}
/*「特殊効果について」3つのコンテンツを縦に並べる(::768px)*/
.attention_effect{
	display:flex;
	flex-direction:column;
	gap:0.5rem;
	justify-content:center;
	width:30%;
}
/*注意点の各コンテンツのテキスト調整*/
.attention_wrapper.txt{
	margin:1rem 0;
	text-align:left;
}
/*「特殊効果について」白ボックス*/
.box{
	background-color:#fff;
	border:1px solid #919292;
	font-weight:400;
	min-height:100px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	margin-bottom:1rem;
}


/*--------------------------------------------------------------------------*/

.article h5{
	position: relative;
	font-size: 1.1rem;
	text-align: left;
	background-color: #faf1eb;
	padding: 0.8rem;
	padding-left: 2.5rem;
	margin-bottom:0.8rem;
	border-bottom:none;
}

.article h5:before{
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	content: "";
	width: 1rem;
	height: 1rem;
	background-color:#cd742c; 
}

.nyuko-data{
	margin:1rem 2rem;
}



.attention-box{
	border:2px solid #ff0000;
	padding:1rem;
	margin:1rem 0 2rem;
	background-color:#f4e0df;
}

.attention-box p{
	text-align:center;
}

.attention-box p:first-child{
	color:#ff0000;
}

.nyukodata-gray{
	display:flex;
	justify-content:space-around;
	background-color:#f5f6f7;
	gap:1rem;
	padding:1rem;
	margin:1rem 0 2rem;
}

.nyukodata-gray2{
	background-color:#f5f6f7;
	padding:1rem;
	margin:1rem 0 2rem;
}

.article .p-left2{
	padding-left:1em;
	margin-bottom:2rem;
}

.article .p-left3{
	padding-left:1em;
}

/*　見積もり注文フォーム　*/
.article .mail_domain{
	margin-bottom:4rem;
}

/*　エプロンページへのバナー */
.pc-btn{
	margin-bottom:2rem;
}

.sp-btn{
	display:none;
}


