@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	事業内容

//////////////////////////////////////////////////////////////////////////////*/


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

 バナー

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

#content > main {
	position: relative;
}

#content > main .banner {
	position: absolute;
	top: 300px;
	right: 16.14%;
	width: 320px;	
	margin-left: auto;
	margin-right: 0;
	background-color: #FFF;
	border-radius: 8px;
	z-index: 2;
}

#content > main .banner a {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 320 / 100;
	background-image: url(../../common/img/banner_archive_yellow.svg);
	background-size: cover;
	border-radius: 8px;
	box-shadow: 0 0 .5em 0 rgba(0,0,0,.25);
}

#content > main .banner a::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	rotate: 90deg;
	right: 1.25em;
	width: 1em;
	aspect-ratio: 1/1;
	background-image: url("../../common/img/icon_arrow_blue.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	animation: down 2s infinite;
}

@keyframes down {
0%,100% {translate: 0 -50%;}
50% {translate: 0 -20%;}
}

@media screen and (max-width: 1024px) {
	
#content > main .banner{
	top: 160px;
	right: 7%;
	width: 250px;	
}

#content > main .bannera:hover {
	opacity: 1;
}	
	
}

@media screen and (max-width: 767px) {
	
#content > main .banner{
	top: 34.5vw;
	right: 7vw;
	width: 35vw;	
}

#content > main .bannera {
	border-radius: 4px;
}

#content > main .bannera::after {
	right: 4vw;
	width: 2.5vw;
}


}


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

 商品ができるまで

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

main  #process dl dd .group {
	display: flex;
	flex-direction: row-reverse;
}

main  #process dl dd .group .text {
	flex: 1;
}

main  #process dl dd .group figure {
	width: 32%;
	margin: 0 4% 0 0;
}

main  #process dl dd .photo_col2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

main  #process dl dd .photo_col2 figure {
	width: 48%;
}

main  #process .packing .photo_col2 figure {
	position: relative;
	width: 45%;
}

main  #process .packing .photo_col2 figure::after {
	content: '';
	position: absolute;
	right: -15%;
	top: 50%;
	transform: translateY(-50%);
	width: 2em;
	height: 2em;
	background-image: url("../../../common/img/icon_arrow_blue.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

main  #process .packing .photo_col2 figure:last-child::after {
	display: none;
}

main  #process .printing .highlight dd {
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: wrap;
}

main  #process .printing .highlight dd figure {
	margin-bottom: 0;
}

main  #process dl dd .note li {
	font-size: 16px;
}

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

main  #process dl dd .note li {
	font-size: 14px;
}

}

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

main  #process dl dd .group {
	display: flex;
	flex-direction: column-reverse;
}

main  #process dl dd .group figure {
	width: 100%;
	margin: 0 0 4vw 0;
}	

main  #process dl dd .photo_col2 figure {
	width: 100%;
}	

main  #process .packing .photo_col2 figure::after {
	right: -20%;
}	
	
main  #process dl dd .note {
	margin-left: 0;
}	

main  #process dl dd .note li {
	font-size: 3.2vw;
}
	
}


/*	特長
------------------------------------------------------------------------------*/

main #process .feature {
	padding: 1em 2em;
	background-color: rgba(255,255,255,.5);
	border: 2px solid rgba(var(--main-color),1);
}

main #process .feature > dt {
	margin-bottom: .3em;
	font-weight: bold;
	color: rgba(var(--main-color),1);
}


/*	リンクボタン
------------------------------------------------------------------------------*/

main #process .link_button {
	margin-top: 3em;
	text-align: center;
}


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

	印刷実績

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

main #achievement .site_column {
	max-width: 1600px;
}

#content > main #achievement .detail {
	display: flex;
	flex-wrap: wrap;
}

#content > main #achievement .detail .list {
	width: 23.5%;
	margin: 2.5% 2% 0 0;
	text-decoration: none;
}

#content > main #achievement .detail .list:nth-child(-n+4) {
	margin-top: 0;
}

#content > main #achievement .detail .list:nth-child(4n) {
	margin-right: 0;
}

#content > main #achievement .detail .list p {
	font-weight: bold;
}

#content > main #achievement .detail .list .group {
	position: relative;
	border-radius: 10px;
}

#content > main #achievement .detail .list .group img {
	width: 100%;
    aspect-ratio: 370 / 278;
    border-radius: 10px;
    object-fit: cover;
}

#content > main #achievement .detail .list .name,
#content > main #achievement .detail .list .product {
		line-height: 1.5;
}

#content > main #achievement .detail .list .name {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-right: 1em;
	padding: .5em .8em;
	background-color: #FFF;
	border-radius: 0 10px 0 9px;
}

#content > main #achievement .detail .list .product {
	margin-top: .5em;
	padding: 0 .5em;
	font-size: 1.125em;
}

@media screen and (max-width: 1250px) {
	
#content > main #achievement .detail .list p {
	font-size: 1em;
}	

}

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

#content > main #achievement .detail .list {
	width: 30.6%;
	margin-top: 4.5%;
	margin-right: 4%;
}

#content > main #achievement .detail .list:nth-child(-n+4) {
	margin-top: 4.5%;
}

#content > main #achievement .detail .list:nth-child(4n) {
	margin-right: 4%;
}
	
#content > main #achievement .detail .list:nth-child(-n+3) {
	margin-top: 0;
}

#content > main #achievement .detail .list:nth-child(3n) {
	margin-right: 0;
}	
	
}

@media screen and (max-width: 767px) {
	
#content > main #achievement .detail .list {
	width: 100%;
	margin: 7vw 0 0 0;
}

#content > main #achievement .detail .list:nth-child(-n+4),
#content > main #achievement .detail .list:nth-child(-n+3) {
	margin-top: 7vw;
}
	
#content > main #achievement .detail .list:nth-child(4n) {
	margin-right: 0;
}	
	
}