@charset "utf-8";

/* 共通レイアウト　開始 ------------------------------------------ */

/* データ入稿TOP カレント用調整 */
#smenu li.s_data a.active {
	color: #333;
    background: #FFF;
	font-weight: normal;
}
#smenu li.s_data a:hover {
    background: #e8e8e8;
    color: #162f65;
}


/* データ入稿　開始 ------------------------------------------ */
#data {
	margin-bottom: 80px;
}
.data_top > p:last-child {
    margin-bottom: 60px;
}
/* 注文ボタン */
#data .btn_g {
    width: 250px;
    margin-inline: auto;
}
@media screen and (max-width:750px) {
    .data_top > p:last-child {
        margin-bottom: calc(100 * 100vw / 750);
    }
	#data .btn_g {
		width: auto;
		padding: calc(24 * 100vw / 750) 0;
		font-size: calc(30 * 100vw / 750);
	}
	#data .btn_g-arrow {
        width: calc(36 * 100vw / 750);
        height: calc(36 * 100vw / 750);
        left: calc(12 * 100vw / 750);
	}
	#data .btn_g-arrow::after{
		width: calc(14 * 100vw / 750);
		height: calc(18 * 100vw / 750);
		left: calc(20 * 100vw / 750);
	}
}
/* ページ頭・データ注意エリア */
#data .data_top .data_caution {
    display: flex;
	gap: 0 20px;
    margin: 20px 0;
}
#data .data_top .caution_img {
    display: flex;
    width: 120px;
    align-items: center;
    gap: 0 10px;
}
#data .data_top .data_caution p {
    font-size: 14px;
}
@media screen and (max-width:750px) {
	#data .data_top .data_caution {
		flex-direction: column;
		gap:calc(20*100vw/750) 0;
		margin: calc(30 * 100vw / 750) 0;
	}
	#data .data_top .data_caution {
		align-items: center;
	}
	#data .data_top .data_caution p {
		font-size:calc(24*100vw/750);
	}
}
/* データ入稿取り扱い用紙タイプ */
#data .data_typelist {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 40px;
}
#data .data_typelist li {
    width: 360px;
    margin: auto;
}
#data .data_typelist .type_title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}
#data .data_typelist .type_img {
    background: url(../img/bg_type.png) no-repeat center center;
    background-size: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 200px;
	margin-bottom: 25px;
}
#data .data_typelist p{
    margin-bottom: 20px;
}
/* #data .data_typelist .btn_g {
    width: 250px;
    margin-inline: auto;
} */
.data_block_top{
	margin-bottom: 20px;
}
/* データ作成について */
#data_making .anc_list-link{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
#data_caution .data_caution-box:not(:last-child){
	margin-bottom:30px;
}
#data_caution .data_block_top{
	margin-bottom:30px;
}
@media screen and (max-width:750px){
	/* データ入稿取り扱い用紙タイプ */
	#data .data_typelist {
		gap: calc(80 * 100vw / 750) 0;
	}
	#data .data_typelist li {
		width: 100%;
	}
	#data .data_typelist .type_title{
		font-size: calc(35 * 100vw / 750);
		margin-bottom:calc(26 * 100vw / 750);
	}
	#data .data_typelist .type_img {
        width: 100%;
        height: calc(450 * 100vw / 750);
        padding: calc(40 * 100vw / 750);
        box-sizing: border-box;
        background: #65829b;
        margin-bottom: calc(20 * 100vw / 750);
    }
	/* #data .data_typelist .btn_g {
		width: auto;
        padding: calc(24 * 100vw / 750) 0;
        font-size: calc(30 * 100vw / 750);
	}
	#data .data_typelist .btn_g-arrow {
        width: calc(36 * 100vw / 750);
        height: calc(36 * 100vw / 750);
        left: calc(12 * 100vw / 750);
	}
	#data .data_typelist .btn_g-arrow::after{
		width: calc(14 * 100vw / 750);
		height: calc(18 * 100vw / 750);
		left: calc(20 * 100vw / 750);
	} */

	.data_block_top{
		margin-bottom:calc(35 * 100vw / 750);
	}
	/* データ作成について */
	#data_making .anc_list-link{
		display: grid;
		grid-template-columns: auto;
		gap: calc(20 * 100vw / 750);
	}

	#data_caution .data_caution-box:not(:last-child){
		margin-bottom: calc(52 * 100vw / 750);
	}
	#data_caution .data_block_top{
		margin-bottom:calc(60 * 100vw / 750);
	}
}
/* データ入稿　終了 ------------------------------------------ */


/* data/以下 共通パーツ 
------------------------------------------ */

#data .data_mintitle{
    font-weight: bold;
    margin-bottom: 10px;
}
#data .data_box + .data_box {
	margin-top: 38px;
}
#data .two_column {
	display: flex;
}
#data .two_column .paper_img {
	margin-right: 20px;
	width: 253px;
	flex-shrink: 0;
}
#data .two_column .paper_img.card{
	width: 455px;
}
#data .paper_spec + .paper_spec{
	margin-top: 30px;
}
#data .set_link {
    display: flex;
}
#data .set_link li + li{
	margin-left: 20px;
}
/*テンプレートについて*/
#data_template .temp_top_text {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
#data_template .btn_g.-ol {
    width: 360px;
    margin: auto;
}
#data_template .caution_red span{
	color: #333;
}

/* 用紙イメージ */
#data_image .data_imagelist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
}
#data_image .data_imagelist li{
	width: 440px;
	text-align: center;
	padding: 30px 0;
}
#data_image .data_imagelist .w-100 {
    width: 100%;
}
#data_image .image_title{
	font-weight: bold;
    margin-bottom: 30px;
}
#data_image .image_title::before {
    content: "";
    display: inline-block;
    vertical-align: sub;
    padding-right: 20px;
}
/* モノクロタイプ */
#data_image .data_imagelist .image_mono{
	background: #F0F0F0;
}
#data_image .image_mono .image_title::before{
	background: url(../img/ico_mono.png) no-repeat center center;
	width: 20px;
	height: 20px;
}
/* カラータイプ */
#data_image .data_imagelist .image_color {
	background: #FFFDE5
}
#data_image .image_color .image_title::before{
	background: url(../img/ico_color.png) no-repeat center center;
	width: 80px;
	height: 20px;
}
/*注文ボタン*/
#data .data_imagelist .btn_g {
    width: 360px;
    margin: 30px auto 0px;
}
/* 価格について */
#data_price {
    position: relative;
}
#data_price .btn_mitsumori {
	position: absolute;
	right: 3px;
	bottom: 90px;
}
/*作成サイズ*/
#data_size .box_pink {
    display: inline-block;
    padding: 10px;
}
#data_size p{
	word-break: break-all;
}
@media screen and (max-width:750px){
	#data .data_mintitle{
		margin-bottom:calc(10*100vw/750);
	}
	#data .data_box + .data_box {
		margin-top:calc(60*100vw/750);
	}
	#data .paper_spec + .paper_spec{
		margin-top:calc(50*100vw/750);
	}
	#data .two_column {
		flex-direction: column;
	}
	#data .two_column .paper_img.card {
		width: 100%;
	}
	#data .two_column .paper_img {
		margin-right:0;
		margin-bottom: calc(20*100vw/750);
		width:100%;
	}
	#data .two_column .paper_img img {
		width: 100%;
	}
	#data .set_link {
		flex-direction: column;
	}
	#data .set_link li + li{
		margin-left:0;
		margin-top:calc(10*100vw/750);
	}
	/*テンプレートについて*/
	#data_template .temp_top_text {
		font-size:calc(30*100vw/750);
		margin-bottom:calc(14*100vw/750);
	}
	#data_template .btn_g.-ol {
		width:calc(600*100vw/750);
	}
	/* 用紙イメージ */
	#data_image .data_imagelist {
		margin-bottom:calc(25*100vw/750);
	}
	#data_image .data_imagelist li{
		width:100%;
		padding:calc(40*100vw/750);
	}
	#data_image .data_imagelist li + li{
		margin-top:calc(40*100vw/750);
	}
	#data_image .image_title{
		margin-bottom:calc(15*100vw/750);
	}
	#data_image .image_title::before {
		padding-right:calc(35*100vw/750);
	}
	/* モノクロタイプ */
	#data_image .data_imagelist .image_mono{
		background: #F0F0F0;
	}
	#data_image .image_mono .image_title::before{
		width:calc(35*100vw/750);
		height:calc(35*100vw/750);
		background-size: contain;
	}
	/* カラータイプ */
	#data_image .data_imagelist .image_color {
		background: #FFFDE5
	}
	#data_image .image_color .image_title::before{
		width:calc(140*100vw/750);
		height:calc(35*100vw/750);
		background-size: contain;
	}
	/*注文ボタン*/
	#data .data_imagelist .btn_g {
		width:auto;
		margin:calc(50*100vw/750) auto 0px;
	}
	/* 価格について */
	.data_price-flex{
		display: flex;
		flex-direction: column;
	}
	#data_price .btn_mitsumori {
		position: static;
		order: 1;
		margin-bottom:calc(35*100vw/750);
	}
	#data_price .common_table{
		order: 2;
	}
	#data_price .caution_list{
		order: 3;
	}
	/*作成サイズ*/
	#data_size .box_pink {
		padding:calc(16*100vw/750);
	}
}