@charset "utf-8";
/* # =================================================================
#### 01
# ================================================================= */
.section01{
	
}
.section01 .info{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 100px;
}
.section01 .info p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
	font-size : var(--20px);
}
.section01 .item{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.section01 .item h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	line-height : 1;
	color : #604223;
	font-size : var(--26px);
	font-weight : bold;
	padding-left : 1em;
	margin-bottom : 50px;
}
.section01 .item h3::before{
	content  : "";
	position : absolute;
	display : block;
	width : 8px;
	height : 100%;
	background-color : #604223;
	top : 2px;
	bottom : 0;
	left : 0;
}
.section01 .item figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	aspect-ratio : 1;
	margin-bottom : 15px;
}
.section01 .item figure img{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	object-fit : cover;
}
.section01 .item h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--20px);
	font-weight : 600;
	margin-bottom : 15px;
}
.section01 .item ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.section01 .item ul li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	text-align : justify;
	font-size : var(--16px);
	padding-left : 1em;
	margin-bottom : 10px;
}
.section01 .item ul li:last-child{
	margin-bottom : 0;
}
.section01 .item ul li::before{
	content : "⚫︎";
	position : absolute;
	display : block;
	color : #F87997;
	left : 0;
}
.section01 .flex{
	justify-content : flex-start;
	gap : 50px;
}
.section01 .flex .box{
	flex-grow : 0;
	flex-shrink : 0;
	flex-basis : calc(25% - (50px * 3 / 4));
}





/* # =================================================================
#### 02
# ================================================================= */
.section02{
	
}
.section02 .wrap{
	width : 800px;
}
.machine-list{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border : 1px solid #F87997;
	background-color : #FFEDED;
	padding : 20px 50px;
	margin-top : 50px;
}
.machine-list h4{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	border-radius : 25px;
	background-color : #FFACAC;
	line-height : 1;
	color : #FFF;
	font-size : var(--18px);
	font-weight : bold;
	padding : 10px 50px;
	margin : 0 auto 30px;
}
.machine-list ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.machine-list ul li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	padding-left : 1em;
	margin-bottom : 5px;
}
.machine-list ul li:last-child{
	margin-bottom : 0;
}
.machine-list ul li::before{
	content : "・";
	position : absolute;
	display : block;
	left : 0;
}



/* # =================================================================
#### 03
# ================================================================= */
.section03{
	background : url(../../images/top/print_back.jpg)center / cover no-repeat;
}
.section03 .info{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.section03 .info p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--18px);
	font-weight : 600;
}
.section03 .flex{
	margin-bottom : 50px;
}
/* # =================================================================
#### エフェクト
# ================================================================= */
#item01 .flex .box:nth-child(1),
#item02 .flex .box:nth-child(1),
#item03 .flex .box:nth-child(1){
	
}
#item01 .flex .box:nth-child(2),
#item02 .flex .box:nth-child(2),
#item03 .flex .box:nth-child(2){
	transition : all 0.8s ease-out .2s;
}
#item01 .flex .box:nth-child(3),
#item02 .flex .box:nth-child(3),
#item03 .flex .box:nth-child(3){
	transition : all 0.8s ease-out .3s;
}
#item01 .flex .box:nth-child(4),
#item02 .flex .box:nth-child(4),
#item03 .flex .box:nth-child(4){
	transition : all 0.8s ease-out .4s;
}
#item01 .flex .box:nth-child(5),
#item02 .flex .box:nth-child(5),
#item03 .flex .box:nth-child(5){
	
}
#item01 .flex .box:nth-child(6),
#item02 .flex .box:nth-child(6),
#item03 .flex .box:nth-child(6){
	transition : all 0.8s ease-out .2s;
}
#item01 .flex .box:nth-child(7),
#item02 .flex .box:nth-child(7),
#item03 .flex .box:nth-child(7){
	transition : all 0.8s ease-out .3s;
}
#item01 .flex .box:nth-child(8),
#item02 .flex .box:nth-child(8),
#item03 .flex .box:nth-child(8){
	transition : all 0.8s ease-out .4s;
}





/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){

}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){

}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){

}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/