@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------------------------

	use　用途

-----------------------------------------------------------------*/

/*--------メイン画像--------*/
.mainImg{
	margin-bottom: 15px;
}
.mainImg h2{
	background: linear-gradient(to top, #d2d9e4 0%, #fff 32%);
	text-align: center;
}
.mainImg dl{
	width: 1000px;
	margin: 15px auto;
	box-sizing: border-box;
}
.mainImg dl dt{
	font-size: 22px;
	color: #e70d0d;
	text-align: center;
	letter-spacing: .04em;
	font-weight: bold;
	margin-bottom: 10px;
}
@media screen and (max-width: 786px) {
	.mainImg dl{
		width: 98%;
		margin: 10px auto;
	}
	.mainImg dl dt{
		font-size: 17px;
	}
}
@media screen and (max-width: 480px) {
	.mainImg dl dt{
		font-size: 15px;
	}
	.mainImg dl dd{
		font-size: 13px;
	}
}


.container .h_black {
	color: #FFF;
	font-weight: bold;
	text-align: center;
	background: #2e2e2e;
	padding: 10px;
	font-size: 18px;
	margin-bottom: 15px;
	letter-spacing: .1em;
}
.container .h_black span {
	color: #d21d00;
	background: #FFF;
	border-radius: 30px;
	padding: 2px 15px;
	margin: 0 5px;
}

@media screen and (max-width: 480px) {
	.container .h_black {
		font-size: 15px;
	}
}



/*--------家紋--------*/
.container .campaignCont .kamon_list li {
	width: 170px;
	margin: 0 10px 20px 0;
	float: left;
}
.container .campaignCont .kamon_list li:nth-child(4n) { margin: 0 0 20px 0; }

.container .campaignCont .kamon_list li figcaption {
	font-weight: bold;
	color: #333333;
	font-size: 13px;
	text-align: center;
	margin-top: 5px;
}

@media screen and (max-width: 786px) {
	.container .campaignCont .kamon_list {
		margin: 0 1%;
	}
	.container .campaignCont .kamon_list li {
		width:19%;
		margin: 0 1.2% 15px 0;
	}
	.container .campaignCont .kamon_list li:nth-child(4n) { margin: 0 1.2% 15px 0; }
	.container .campaignCont .kamon_list li:nth-child(5n) { margin: 0 0 20px 0; }
}
@media screen and (max-width: 480px) {
	.container .campaignCont .kamon_list li {
		width: 32%;
		margin: 0 2% 15px 0;
	}
	.container .campaignCont .kamon_list li:nth-child(4n) { margin: 0 2% 15px 0; }
	.container .campaignCont .kamon_list li:nth-child(5n) { margin: 0 2% 15px 0; }
	.container .campaignCont .kamon_list li:nth-child(3n) { margin: 0 0 15px 0; }
	.container .campaignCont .kamon_list li figcaption {
		font-size: 12px;
	}
}



/*--------同人--------*/
.container .campaignCont .doujin_designlist li {
	width: 340px;
	margin: 0 0 10px 0;
	float: left;
}
.container .campaignCont .doujin_designlist li:nth-child(even) { margin: 0 30px 10px 0; }

.container .campaignCont .doujin_designlist li figcaption {
	font-weight: bold;
	color: #333333;
	font-size: 13px;
	text-align: center;
}

@media screen and (max-width: 786px) {
	.container .campaignCont .doujin_designlist li {
		width: 49%;
	}
	.container .campaignCont .doujin_designlist li:nth-child(even) { margin: 0 2% 10px 0; }
}
@media screen and (max-width: 480px) {
	.container .campaignCont .kamon_list li {
		width: 32%;
		margin: 0 2% 15px 0;
	}
	.container .campaignCont .kamon_list li:nth-child(4n) { margin: 0 2% 15px 0; }
	.container .campaignCont .kamon_list li:nth-child(5n) { margin: 0 2% 15px 0; }
	.container .campaignCont .kamon_list li:nth-child(3n) { margin: 0 0 15px 0; }
	.container .campaignCont .kamon_list li figcaption {
		font-size: 12px;
	}
}


/*---------こんなことも可能---------*/
.container .print_data {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px dotted #2B2B2B;
}

.h_check_bl {
	background: #dff2ff;
	color: #001b3d;
	font-size: 19px;
	font-weight: bold;
	padding: 10px 15px;
	margin-bottom: 20px;
}
.h_check_bl:before {
	content: "";
	background: url(../../_images/common/icon_check_on.webp) no-repeat;
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 13px;
	vertical-align: middle;
}

.h_check_bl span {
    background: linear-gradient( transparent 60%, #fffb04 0%);
}

.container .campaignCont .print_data .print_cont { margin-bottom: 20px; }

.container .campaignCont .print_data .print_cont .img {
	width: 410px;
	float: left;
	margin-right: 40px;
}
.container .campaignCont .print_data .print_cont .text {
	width: 260px;
	float: left;
}
@media screen and (max-width: 786px) {
	.container .campaignCont .print_data .print_cont { margin: 0 1% 20px; }
	.container .campaignCont .print_data .print_cont .img {
		width: 48%;
		margin-right: 4%;
	}
	.container .campaignCont .print_data .print_cont .text {
		width: 48%;
	}
}
@media screen and (max-width: 480px) {
	.container .campaignCont .print_data .print_cont { margin: 0 0 20px; }
	.container .campaignCont .print_data .print_cont .img {
		width: 100%;
		margin: 0 0 10px 0;
		float: none;
	}
	.container .campaignCont .print_data .print_cont .text {
		width: 96%;
		margin: 0 auto;
		float: none;
		font-size: 13px;
	}
}


/*----------------*/
@media screen and (max-width: 786px) {
}
@media screen and (max-width: 480px) {
}


/*----------------*/
@media screen and (max-width: 786px) {
}
@media screen and (max-width: 480px) {
}




/*--------------------下層共通------------------*/


/*--生地/青色見出し--*/

.container section .kijiBox li {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #c3c3c3;
}

.container section .kijiBox div.kijiInfo {
	float: right;
	width: 275px;
}
.container section .kijiBox .clearfix > .img {
	float: left;
	width: 410px;
}

.container section .kijiBox div.kijiInfo .kijiBox_h{
	background-color: #e9f9ff;
	color: #002458;
	margin-bottom: 10px;
	padding: 13px 0 13px 30px;
	font-size: 18px;
	font-weight: bold;
	border-top: 2px solid #002458;
	border-bottom: 2px solid #002458;
	position: relative;
}
.container section .kijiBox div.kijiInfo .kijiBox_h:before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-left: 5px solid #002458;
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.container section .kijiBox div.kijiInfo {
	margin-bottom: 15px;
}

.container section .kijiBox .kijiBox_text dt{
	color: #002458;
	margin-bottom: 5px;
	padding: 5px 0 5px 32px;
	font-size: 15px;
	font-weight: bold;
	position: relative;
}
.container section .kijiBox .kijiBox_text dt:before{
	content: "";
	display: block;
	background-color: #002458;
	background-image: url(../../_images/common/icon_exclamation.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	position: absolute;
	left: 0px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.container section .kijiBox div.kijiInfo dd .color_list li {
	width: 65px;
	float: left;
	margin: 0 5px 5px 0;
}
.container section .kijiBox div.kijiInfo dd .color_list li:nth-child(4n) { margin: 0 0 5px 0; }
.container section .kijiBox div.kijiInfo dd .color_list li img { width: 100%; }

@media screen and (max-width: 786px) {
	/*--生地--*/
	.container section .kijiBox{
		width: 98%;
		margin: 0 auto 20px;
	}
	
	.container section .kijiBox.teiban .img a:before,
	.container section .kijiBox.recommend .img a:before {
		top: 3%;
		right: 2%;
		width: 19%;
		height: 20%;
		background-size: contain;
	}
	.container section .kijiBox.teiban .img a:before { 
		width: 19%;
		height: 20%;
	}
	.container section .kijiBox.recommend .img a:before { 
		width: 24%;
		height: 18%;
	}
	
	.container section .kijiBox div.kijiInfo {
		width: 43%;
	}
	.container section .kijiBox .clearfix > .img {
		width: 55%;
	}
	
	.container section .kijiBox div.kijiInfo .kijiBox_h{
		padding: 5px 0 5px 30px;
		font-size: 16px;
	}
	.container section .kijiBox div.kijiInfo .kijiBox_text dt{
		font-size: 15px;
	}
	.container section .kijiBox div.kijiInfo {
		margin-bottom: 0;
	}
	
	.container section .kijiBox div.kijiInfo dd .color_list li {
		width: 22%;
		margin: 0 4% 5px 0;
	}
	.container section .kijiBox div.kijiInfo p.graph { 
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 480px) {
	/*--生地--*/
	.container section .kijiBox div.kijiInfo {
		width: 100%;
	}
	.container section .kijiBox .clearfix > .img {
		width: 100%;
	}
	.container section .kijiBox div.kijiInfo .kijiBox_h{
		padding: 5px 0 5px 30px;
		font-size: 16px;
	}
	.container section .kijiBox div.kijiInfo dl dt{
		font-size: 15px;
	}
	.container section .kijiBox div.kijiInfo p.graph { 
		width: 80%;
		margin: 0 auto 10px;
	}
	.container section .kijiBox > dl{
		width: 90%;
		margin: 0 auto;
		font-size: 12px;
	}

}


/*----納品形態について----*/

.dblue_box { margin-bottom: 20px; }

.dblue_box li {
	width: 340px;
	border: 1px solid #002458;
	box-sizing: border-box;
	margin: 0 0 20px 0;
	float: left;
	counter-increment: number;
}
.dblue_box li:nth-child(odd) { margin: 0 30px 20px 0; }

.dblue_box li dt {
	color: #FFF;
	font-weight: bold;
	font-size: 23px;
	text-align: center;
	padding: 15px;
	background: #002458;
}
.dblue_box.number li dt:before {
	content: counter(number);
	padding: 3px 9px;
	border-radius: 3px;
	background: #FFF;
	color: #002458;
	margin-right: 15px;
	display: inline;
	font-size: 14px;
	vertical-align: middle;
}

.dblue_box li.recommend dd { position: relative; }
.dblue_box li.recommend dd:before {
	content: "";
	background: url(../../_images/use/nouhin_recommend.gif) no-repeat;
	width: 78px;
	height: 35px;
	background-size: contain;
	position: absolute;
	top: 10px;
	left: 10px;
}

.dblue_box li dd img {
	width: 100%;
}
.dblue_box li dd .text {
	padding: 15px;
	font-size: 13px;
}

@media screen and (max-width: 786px) {
	.dblue_box { margin-bottom: 20px; }
	.dblue_box {
		width: 95%;
		margin: 0 auto;
	}
	.dblue_box li {
		width: 49%;
	}
	.dblue_box li.recommend dd:before {
		width: 24%;
		height: 10%;
		top: 3%;
		left: 3%;
	}
	.dblue_box li:nth-child(odd) { margin: 0 2% 20px 0; }
}
@media screen and (max-width: 480px) {
	.dblue_box li {
		width: 100%;
		margin: 0 0 15px 0;
	}
	.dblue_box li:nth-child(odd) { margin: 0 0 15px 0; }

	.dblue_box li dt {
		font-size: 19px;
		padding: 10px;
	}
	.dblue_box li dt:before {
		padding: 2px 7px;
		margin-right: 10px;
	}
	.dblue_box li dd .text {
		padding: 12px 15px;
	}
	
}


/*--リンク--*/
.container section .page_link {
	margin-bottom: 60px;
}
.container section .group_box .link_box { margin-bottom: 20px; }
.container section .group_box .link_box li {
	float: left;
	margin: 0 18px 20px 0;
}
.container section .group_box .link_box li:nth-child(4n) { margin-right: 0; }

@media screen and (max-width: 786px) {
	.container section .group_box dl dt {
		font-size: 15px;
	}
	.container section .group_box .link_box { 
		width: 98%;
		margin: 0 auto 20px auto;
	}
	.container section .group_box .link_box li {
		float: left;
		margin: 0 2% 10px 0;
		width: 32%;
	}
	.container section .group_box .link_box li:nth-child(4n) { margin: 0 0 10px 0; }
	.container section .group_box .link_box li:nth-child(3n) { margin: 0 0 10px 0; }
}


/*--活用シーン--*/
.container section .yellowBox > li.infoBox { 
	margin-bottom: 20px;;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.container section .yellowBox > li.infoBox:last-child { margin-bottom: 0; }

.container section .yellowBox > li.infoBox .text { width: 370px; float: right; }
.container section .yellowBox > li.infoBox .img { width: 340px; float: left; }

.container section .yellowBox > li.infoBox h4{
	background-color: #e7ee3e;
	color: #2d2523;
	padding: 20px 20px 20px 40px;
	font-size: 22px;
	font-weight: bold;
	position: relative;
}
.container section .yellowBox > li.infoBox h4:before{
	content: "";
	display: block;
	background-image: url(../../_images/common/icon_arrow.gif);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 18px;
	height: 18px;
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.container section .yellowBox > li.infoBox dl,
.container section .yellowBox > li.infoBox .text_cont {
	padding: 20px;
}
.container section .yellowBox > li.infoBox dl dt{
	color: #df2f00;
	padding: 5px 0;
	font-size: 17px;
	font-weight: bold;
}

.container section .yellowBox > li.infoBoxPlus{
	background-color: #f2f9fa;
	padding: 30px;
	border-bottom: 1px solid #d0d0d0;
}
.container section .yellowBox > li.infoBoxPlus:last-child{
	border: none;
}
.container section .yellowBox > li.infoBoxPlus h5{
	border-bottom: 6px double #002458;
	color: #002458;
	width: 50%;
	margin: 0 auto 15px;
	padding: 5px 0;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 786px) {
	/*--仕立て--*/
	.container section .yellowBox > li.infoBox { 
		width: 98%;
		margin: 20px auto;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}
	
	.container section .yellowBox > li.infoBox .img { width: 43%; }
	.container section .yellowBox > li.infoBox .text { width: 57%; }
	
	.container section .yellowBox > li.infoBox h4{
		padding: 10px 10px 10px 40px;
		font-size: 18px;
	}
	.container section .yellowBox > li.infoBox dl{
		padding: 10px 20px 20px;
	}
	
	.container section .yellowBox > li.infoBoxPlus{
		padding: 15px;
	}
	.container section .yellowBox > li.infoBoxPlus h5{
		width: 80%;
		margin: 0 auto 15px;
		font-size: 18px;
	}
	.container section .yellowBox > li.infoBoxPlus .imgBox img{
		max-width: 590px;
	}
}
@media screen and (max-width: 480px) {
	/*--仕立て--*/
	.container section .yellowBox > li.infoBox .img { width: 100%; }
	.container section .yellowBox > li.infoBox .text { width: 100%; }
	
	.container section .yellowBox > li.infoBox h4{
		padding: 10px 10px 10px 40px;
		font-size: 18px;
	}
}


/*--------------------dl開閉-------------------*/

/*クリック開閉*/
	.container section .openBox input{
		display: none;
	}

@media screen and (max-width: 786px) {
	.container section .openBox dl dt{
		border: 2px solid #E3E3E3;
		padding: 7px 23px 7px 20px;
		box-sizing: border-box;
		font-size: 16px;
		border-radius: 3px;
		line-height: 1.4em;
	}
	.container section .openBox dl dd{
		width: 97%;
		margin: 0 auto;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		transition: 0.35s;
		display: block;
	}
	.container section .openBox input:checked + label + dd {
		max-height: 400px;
	}
	/*「+-」アイコンと動き*/
	.container section .openBox label{
		display: block;
		position: relative;
	}
	.container section .openBox dt:after{
		content: "";
		display: block;
		width: 25px;
		height: 25px;
		background: none;
		border-radius: 3px;
		position: absolute;
		right: 5px;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 2;
	}
	.container section .openBox label:before,
	.container section .openBox label:after{
		content: "";
		display: block;
		width: 2px;
		height: 13px;
		background: #000;
		position: absolute;
		right: 16px;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 5;
		transition: transform 0.2s linear; 
	}
	.container section .openBox label:after{
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		opacity: 1.0;
	}
	.container section .openBox input:checked + label{
		background: #FFF2B3;
	}
	.container section .openBox input:checked + label:before{
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	.container section .openBox input:checked + label:after{
		opacity: 0;
	}
}