/* =============================================================
プリント方法 .print
============================================================= */
/* =============================================================
共通 
============================================================= */
/* コンテンツの上下余白 */
.print .content{
	margin:9rem 0;
}

/* 見出し */
.print h5{
	background-color: var(--color-primary);
	padding:1rem 4rem;
	width:100%;
	position:relative;
	text-align:center;
	display:inline-block;
}

/* 見出しのアイコン */
.print h5::before,
.print h5::after {
	position:absolute;
	content:"";
	background-size:contain;
	background-repeat:no-repeat;
	top:50%;
	transform:translateY(-50%);
	width:32px;
	height:32px;
}

/* リード文 */
.print p.lead{
	text-align:center;
	margin:1rem auto;
}


/* 各プリント方法のデザイン .content
-------------------------------------------*/
/*------ 画像とテキスト -------*/
/* 各生地の見出し */
.print .content h2{
	width:100%;
	color:#fff;
	font-size: 1.7rem;/*文字サイズ*/
	letter-spacing:1.5px;
	padding: 2rem 0;/*文字回りの余白（上下左右）*/
	display: block;
	border:none;
	background:linear-gradient(to left,transparent 1%, #efece0 2%, #8c7845 50%, #efece0 98%, transparent 99%);
}

/* 1つ中のコンテンツ */
.print .content .wrapper{
	width:95%;
	margin:0 auto;
}

/* 画像を説明テキスト */
.print .content .wrapper ul{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	gap:5rem;
	margin:2rem auto;
}

/* 画像とテキスト幅 */
.print .content .print_img, .print .content .print_txt{
	flex:1;
}

/* テキスト（右） */
.print .content .print_txt{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

/*------ 表 -------*/
/* 表 */
.print .content table{
	border-collapse: separate;
	border-spacing:0rem 0.5rem;
	border:none;
	text-align:center;
}

/* 表　行 */
.print .content tr{
	border:none;
	border-color:transparent;
}

/* 表　注釈 */
.print .content tr span{
	font-size:0.7rem;
}

/* 表　頭 */
.print .content th{
	background-color: var(--color-inner);
	color:#fff;
}

/* 表　右 */
.print .content td{
	background-color: #fffbf5;
	border:solid 3px var(--color-inner);
	font-weight:bold;
}

/*------ 価格・目安サイズ -------*/
/* 円アイコン */
.print_price_size h5::before{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_en.png");
	left:1rem;
}
/* 定規アイコン */
.print_price_size h5::after{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_size.png");
	right:1rem;
}

/* 各サイズのコンテンツの包み */
.print .content .print_price_size ul{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	flex-wrap:nowrap;
	align-items: stretch;
	gap:2rem;
	margin-bottom:2rem;
}

/* 各サイズのコンテンツ */
.print .content .print_price_size li{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	width:33.33%;
}

/* 価格の表 */
.print .content .print_price_size table{
	border:5px solid #d7d9df;
	border-left:transparent;
	border-right:transparent;
	padding:1rem 0;
	border-collapse: collapse;
}

/* 版代とプリント代の線 */
.print .content .print_price_size table tr:first-of-type{
	border-bottom:1px solid #000;
}

/* 表　頭 */
.print .content .print_price_size table th{
	background-color:#fff;
	color:#000;
}

/* 表　右 */
.print .content .print_price_size table td{
	background-color:#fff;
	border:none;
	text-align:right;
}

/* プリント代の表 */
.print .content .print_price_size .table_inner{
	margin-top:auto;/* 表の高さをそろえる */
}

/* プリント可能範囲注釈 */
.print .content .print_price_size .color_area{
	display:flex;
	flex-direction:row;
	justify-content: flex-end;
	align-items: center;
}
/* プリント可能範囲注釈アイコン */
.print .content .print_price_size .color_icon{
	display:inline-block;
	width:20px;
	height:20px;
	background-color:#ffd2d2;
}

/*------ 印刷位置について -------*/
/* 大くくり */
.print .content .print_price_size .print_position{
	margin:3.5rem 0;
}

/* 見出し */
.print .content .print_price_size .print_position h6{
	border-top:dotted 4px var(--color-inner);
	border-bottom:dotted 4px var(--color-inner);
	padding:0.5rem 0;
	text-align:center;
}

/* 2つのコンテンツ */
.print .content .print_position ul{
	display:flex;
	flex-direction:row;
	text-align:center;
}

/* 各コンテンツを同じ幅に */
.print .content .print_position ul li{
	flex:1;
}

/* 印刷可能位置コンテンツ */
.print .content .print_position ul li:nth-child(even){
	padding:2rem;
	background-color:#faefef;
}

/* 左暖簾画像 */
.print .content .print_position ul li img:nth-child(odd){
	width:40%;
	margin:0 auto;
}

/*------ プリントの作業工程 -------*/
/* インク01アイコン */
.print_process h5::before{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_ink01.png");
	left:1rem;
}
/* インク02アイコン */
.print_process h5::after{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_ink02.png");
	right:1rem;
}

/* 作業工程枠 */
.print .content .print_process ul{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
	align-content: center;
	gap:2rem;
	margin:2rem auto;
}

/* 各作業工程 */
.print .content .print_process ul li{
	display:flex;
	flex-direction:column;
	gap:0.5rem;
	width:22%;
}

/* 作業工程文 */
.print .content .print_process li p {
	padding:0 1rem;
}

/* 作業工程文（上） */
.print .content .print_process li p span{
	border-bottom:dotted 2px #aaa;
	padding-bottom:0.3rem;
	width:100%;
	display:block;
	font-weight:520;
}


/*------ デザインの作成について -------*/
/* フォントアイコン */
.design h5::before{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_font.png");
	left:1rem;
}
/* デザインアイコン */
.design h5::after{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_design.png");
	right:1rem;
}





/* =============================================================
初めに .first
============================================================= */
/* 各プリント方法コンテンツ */
.print .first ul{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	flex-wrap:nowrap;
	gap:2rem;
	margin:2rem 0;
}

/* 各プリント方法コンテンツ中身 */
.print .first ul .inner01{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	background-color:#cdb075;
	color:#fff;
	font-size:1.5rem;
	font-weight:530;
	text-align:center;
	border-radius:8px;
}

/* （）内のテキスト */
.print .first ul .inner01 span{
	font-size:1.1rem;
}

/* プリントの名前見出し */
.print .first ul .inner01 p.print_name{
	margin:0.5rem auto;
	line-height:1.2;
}

/* プリントの価格 */
.print .first ul .inner01 p.print_price{
	background-color:#9a261f;
	padding:0.2rem 0;
	width:90%;
	margin:0 auto;
	border-radius:8px;
}

/* ボタン矢印アイコン */
.print .first span.icon{
	display:block;
	width:15px;
	height:15px;
	border:solid 4px #fff;
	border-top:transparent;
	border-right:transparent;
	transform:rotate(-45deg);
	margin:1rem auto;
}

/* 「対応生地」コンテンツ */
.print .first ul .inner02 {
	width:100%;
	margin:1.3rem auto;
}

/* 「対応生地」デザイン */
.print .first ul .inner02 .cloth_title{
	text-align:center;
	font-size:1.5rem;
	padding-bottom:0.3rem;
	margin-bottom:0.3rem;
	border-bottom:dotted 3.5px var(--color-inner);
}



/* =============================================================
シルク印刷 #silk
============================================================= */
/*------ シルクプリントの作業工程 -------*/
/* 動画と完成画像大枠 */
.print #silk .completion{
	display:flex;
	flex-direction:row;
	gap:2rem;
	margin:2rem 0;
}

/* 動画と完成画像 */
.print #silk .completion div{
	flex:1;
}


/*------ デザインの作成について -------*/
/* 注意 */
.print #silk .design .attention_area{
text-align:center;
background-color:#f7e5e3;
padding:1.5rem;
margin:2rem 0;
}

/* 注意 赤文字 */
.print #silk .design .attention_area span{
color: var(--color-red);
}

/* ------ プリント内容 ------ */
/* 小見出し */
.print #silk .design h6{
background-color:#d7d9df;
padding:0.8rem 0;
width:100%;
text-align:center;
}

/* コンテンツ枠 */
.print #silk .design .print_select ul{
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
gap:2rem;
}

/* 各コンテンツ */
.print #silk .design .print_select ul li{
display:flex;
flex-direction:column;
align-items:center;
gap:0.3rem;
width:48%;
text-align:center;
}

/* 各コンテンツ */
.print #silk .design .print_select ul li img{
background-color:#e0e6f2;
padding:1rem;
}

/* ------ 書体見本から選んだ場合 ------ */
/* 各書体の枠 */
.print #silk .design .font_samples{
margin:4rem 0;
}

/* 各書体の枠 */
.print #silk .design .font_samples ul{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:1rem;
}

/* 各書体の画像とテキスト */
.print #silk .design .font_samples ul li{
display:flex;
flex-direction:column;
align-items:center;
}

/* 表 */
.print #silk .design .font_samples table {
border-collapse: collapse;
margin-bottom:2rem;
}

/* 各横列 */
.print #silk .design .font_samples table tr{
border:1.5px solid #000;
background-color:transparent;    
}

/* 表　頭 */
.print #silk .design .font_samples table th {
    background-color: transparent;
	color:#000;
}

/* 表　右 */
.print #silk .design .font_samples table td {
    background-color: transparent;
    border: none;
}

/* 別途デザイン代 */
.print #silk .design .font_samples p.outer {
text-align:center;
background-color:#f4f1ec;
width:100%;
padding:0.3rem 0;
}

/* ------ データを入稿する場合 ------ */
/* 大枠 */
.print #silk .design .data_submit{
margin:4rem 0;
}

/* 画像とテキストの枠 */
.print #silk .design .data_submit ul{
text-align:center;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
}

/* =============================================================
DTF印刷 #dtf
============================================================= */
/*------------ DTFプリントの作業工程 -------------*/
/* 完成形枠 */
.print #dtf .print_process .completion ul{
margin:2rem 0;
display:flex;
flex-direction:row;
gap:2rem;
}

/* 大型平プレス機*/
.print #dtf .print_process .completion li:first-child{
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
gap:1rem;
padding:1.3rem;
background-color:#f4f1ec;
width:45%;
}

/* 大型平プレス機*/
.print #dtf .print_process .completion li:first-child p{
width:40%;
}


/* 大型平プレス機*/
.print #dtf .print_process .completion li{
width:23%;
}


/*------------ デザインの作成について -------------*/
/* 文字と枠線内の包み */
.print #dtf .design li{
width:100%;
display:flex;
flex-direction:column;
gap:0.3rem;
}

/* ul内のすべてのp */
.print #dtf .design p{
text-align:center;
}

/* 枠線 */
.print #dtf .design div{
width:100%;
border:solid 1.5px #aaa;
padding:2rem 0;
text-align:center;
}

/* 枠線内の画像 */
.print #dtf .design ul img{
max-width:250px;
margin-bottom:1.5rem;
}





/* =============================================================
昇華転写印刷 #tensya
============================================================= */
/*------ 印刷について -------*/
/* フォントアイコン */
.print_about h5::before{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_full.png");
	left:1rem;
}
/* デザインアイコン */
.print_about h5::after{
	background-image:url("https://asanotakumi.sizeorder-noren.com/wp/wp-content/uploads/icon_arrow.png");
	right:1rem;
}

/* テキストと画像の枠 */
.print #tensya .print_about ul{
display:flex;
flex-direction:row;
gap:2rem;
justify-content:space-around;
flex-wrap:nowrap;
width:95%;
margin:0 auto;
}

/* 「片面（両面）印刷」 */
.print #tensya .print_about p.sub_title{
color:#b03e2a;
font-weight:bold;
font-size:1.2rem;
padding-bottom:0.5rem;
margin:1.5rem 0 1rem;
border-bottom:dashed 1.2px #aaa;
width:50%;
}

/* テキストと画像の幅 */
.print #tensya .print_about li{
flex:1;
}

/* 片面印刷の画像 */
.print #tensya .print_about ul:first-of-type figure{
width:60%;
margin:0 auto;
}

/* 両面印刷の画像 */
.print #tensya .print_about ul:last-of-type figure{
width:90%;
margin:0 auto;
}


/*------ デザインについて -------*/
/*summaryの矢印を消す*/
.design summary{
	display:block;
}
.design summary::-webkit-details-marker {
	/* Safariで表示されるデフォルトの三角形アイコンを消します */
	display: none;
}
/*格納式見出し（オレンジ）*/
.design .attention_wrapper .back_heading_ora{
	font-size:1.1rem;
	text-align:left;
	font-weight:bold;
	background-color:#e9e1cd;
	padding:0.8rem;
	padding-left:1rem;
	border-radius:5px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
/*見出し後の＋アイコン*/
.plus{
	display:block;
	font-size:25px;
	font-weight:1000;
	width:25px;
	color:#63490a;
	position:relative;
	flex-shrink:0;
	transform-origin: center center;
	transition: transform 0.4s;
}
/* アコーディオンが開いた時のスタイル */
details[open] .plus {
	transform: rotate(180deg);
	color:#fff;
}
/* ホーバー時
----------------------------*/
/* デザインとカーソルを変更 */
.design .back_heading_ora:hover {
	cursor:pointer;
	background-color: #c4b591;
}
/* オープン時
----------------------------*/
/* デザインを変更*/
.design details[open] .back_heading_ora {  
	background-color: #c4b591;
}
/* アニメーションを設定 */
.design details[open] .details-content {
	animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
	0% {
		opacity: 0; /* 透明 */
		transform: translateY(-10px); /* 上から表示 */
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
/*注意点の各コンテンツの余白*/
.attention_wrapper{
	margin-bottom:2.5rem;
}
/*注意点の各コンテンツのデザイン・配置*/
.attention_img01, .attention_img02, .attention_img03, .attention_img04{
	background-color:#f4f6f6;
	padding:2rem;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	gap:0.2rem;
	align-items: center;
}
/*注意点：「その他」の個別で調整*/
.attention_img06{
	display:flex;
	flex-direction:column;
	gap:0.5rem;
	justify-content:left;
	background-color:#f4f6f6;
	padding:2rem;
}
.attention_other1{
font-weight:550;
}

/* リード文 */
.design .attention_wrapper p.txt{
margin:1rem 0;
}