@charset "UTF-8";
/* CSS Document */
body#oshigoto{
	background-image: none !important;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #FFFFFF;
	background-size: cover;
	background-attachment: fixed;
}
.osshigoto_bg{
	background-image: url(./img/bg_oshigoto.png);
	background-repeat: repeat;
	background-position: center ;

}

html,body,h1,h2,h3,h4,ul,ol,li,p,span,iframe,footer,address,h1,h2,h3,h4,h5,dl,dt,dd{
  margin: 0;
  padding:0;
}
@media (prefers-reduced-motion: no-preference) {
	:root {
	  scroll-behavior: auto;
	}
}
a{
	color: #333;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a:focus {
	outline: none;
}
a:hover{
	/* text-decoration: underline; */
	color: #6f6f6f;
}

a img{
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a:hover img{
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.link_under:hover{
	text-decoration: underline;
}
.underline{
	text-decoration: underline;
}

/*ホバーエフェクト
------------------------------*/
figure {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure {
    margin: 0 0 0;
}
figure:hover {
	opacity: .5;
}


/* list
------------------------------*/
li {
	list-style-type: none;
}
/* title
------------------------------*/
.tit-oshigoto{
    font-size: 18px;
    color: #FFF;
    font-weight: 600;
    background-color: #42a485;
    border-radius: 100vh;
    /* background-image: url(./img/line.png),url(./img/line.png);
    background-repeat: no-repeat,no-repeat;
    background-size: 240px auto, 240px auto;
    background-position: right 5% center,left 5% center; */
    text-align: center;
	padding: 10px;
	max-width: 900px;
	margin: 0 auto;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* box
------------------------------*/
.lead_box{
    background-color: #FFF;
    border-radius: 20px;
    padding: 20px;
    display: inline-block;
    line-height: 1.8;
    font-weight: 600;
	font-size: 14px;
}
.works_list{
	margin-bottom: 30px;
}
.works_list li a{
    background-color: #FFF;
    border-radius: 20px;
    padding: 18px 40px 18px 65px;
    position: relative;
    width: 100%;
    display: table;
    align-items: center;
    height: 100%;
}
.works_list li a::after{
    content: '\f0a9';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    color: #43a485;
    position: absolute;
    right: 15px;
    font-size: 21px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

}
.works_list li a:hover{
	background-color: #43a485;
	text-decoration: none;
	color: #FFF;
}
.works_list li a:hover::after{
	color: #FFF;
}
.works_list li a:hover h4{
	color: #FFF;
}
.works_list_inner {
	display: table-cell;
	align-items: center;
	vertical-align: middle;
}
.works_list li h4{
	font-weight: 600;
	color: #43a485;
	font-size: 15px;
	margin-bottom: 5px;
}
.works_list li p{
	font-size: 14px;
}
.works_list .number{
	width: 40px;
    height: 40px;
    position: absolute;
    color: #FFF;
    background: #43a485;
    position: absolute;
    top: 50%;
	left: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;
    display: flex;
    font-size: 20px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
	border-radius: 5px;
}
.foot_area{
	background: #E2E768;
	background: linear-gradient(90deg, rgba(226, 231, 104, 1) 0%, rgba(255, 232, 123, 1) 100%);
	color: #3f9867;
	padding: 30px 0;
}
.foot_area .container{ 
	margin-top: 0;
}
.movie_box{
    border-radius: 0px;
    padding: 8px;
    background-color: #fcacbf;
}









@media (min-width: 768px) {
	.lead_box{
		padding: 30px;
		font-size: 18px;
}
	.movie_box{
		border: 8px solid #fcacbf;
		padding: 20px;
		background-color: #fcacbf;
		border-radius: 20px;
	}
}

@media (max-width: 767px) {}
@media (max-width: 991px) {}
@media (min-width: 992px) {
	/* title
	------------------------------*/
	.tit-oshigoto{
		font-size: 21px;
		color: #FFF;
		font-weight: 600;
		background-color: #42a485;
		border-radius: 100vh;
		background-image: url(./img/line.png),url(./img/line.png);
		background-repeat: no-repeat,no-repeat;
		background-size: 240px auto, 240px auto;
		background-position: right 5% center,left 5% center;
		text-align: center;
		padding: 10px;
		height: 66px;
	}

}
@media (min-width: 1200px) {}
@media (max-width: 1199px) {}
@media (min-width: 768px) and (max-width: 1199px) {}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 1400px){}
@media (min-width: 768px) and (max-width: 1399px) {}

@media (min-width: 768px) and (max-width: 991px) {
	/* text
	------------------------------*/
	.lead_text_l{
		font-size: 24px;
	}
}


@media screen and (min-width: 576px) {
	.works_list li h4{
		font-size: 18px;
	}
}



@media print{
}


/* css相殺 */
#menu-holder{
	height: auto;
}
@media screen and (min-width: 581px){
	#pan {
        margin:0;
		padding: 30px 0 15px;
    }
    .container {
        padding: 0;
       background: none;
        border-radius: 0;
		margin-bottom: 0;
    }
	#social-bloc{
		        top: 15px;
	}

}
@media screen and (max-width: 580px){
	.osshigoto_bg{
		padding-top: 20px;
	}
	.works_list li a:link{
		color: #333;
	}
	.works_list li a:hover{
		color: #FFF;
	}
	.foot_area{
		display: none;
	}
}

