@charset "UTF-8";
/* CSS Document */
/*PC*/
@media print, screen and (min-width: 769px) {

#work{
position: relative;
margin: 0 auto 120px;
overflow: hidden;
}

#work .section_wrap{
width: 100%;
margin: 0 auto;
position: relative;
min-width: 1200px;
}

#work .section_wrap .block{
overflow: hidden;
margin: 0 auto 100px;
}

#work .section_wrap .block:last-child{
margin-bottom: 0;
}

#work .section_wrap .block .txt_box{
width: 80%;
margin:0 auto 60px;
}

#work .section_wrap .block .txt_box p span{
font-size: 1.4rem;
font-weight: 700;
color: #0a7fd3;
}

#work .illust_img{
width: 60%;
margin: 0 auto 30px;
}

#work .section_wrap .block .box{
width: 80%;
margin: 0 auto;
background: #f0f3f6;
border-radius:1.2rem;
padding:35px;
box-sizing: border-box;
}

#work .section_wrap .block .box h3{
font-size: 1.4rem;
font-weight: 700;
text-align: center;
line-height: 1;
margin: 0 0 20px;
}

#work .section_wrap .block .box p{
font-size: .9rem;
}

#work .section_wrap .block .img{
width: 100%;
margin: 60px 0 0;
}

#work .section_wrap .block .sbox{
width:80%;
border: 1px solid rgba(0,0,0,.3);
padding: 15px;
box-sizing: border-box;
margin: 0 auto 60px;
border-radius: 1.2rem;
}

#work .section_wrap .block .sbox h3{
background:-webkit-linear-gradient(0deg, rgba(0,140,176,1), rgba(0,20,60,1));
padding: 15px 20px;
box-sizing: border-box;
color: #FFF;
border-radius: 50rem;
font-size: 1.4rem;
line-height: 1;
text-align: center;
margin: 0 0 20px;
}

#work .section_wrap .block .sbox ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#work .section_wrap .block .sbox ul li{
width: 49%;
background: #F1F1F1;
padding: 20px;
box-sizing: border-box;
border-radius: 1rem;
position: relative;
text-align: center;
}

#work .section_wrap .block .sbox ul li .img{
border-radius: .6rem;
overflow: hidden;
margin: 0 0 20px;
}

#work .section_wrap .block .sbox ul li h4{
font-size: 1.2rem;
line-height: 1;
margin: 0 0 10px;
}

#work .section_wrap .block .sbox ul li .icon{
position: absolute;
top:-10px;
left: -10px;
width: 50px;
height: 50px;
padding: 10px;
background: #FFF;
box-sizing: border-box;
border-radius: 50%;
}


#work .section_wrap .block .box .day_flow{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#work .section_wrap .block .box .day_flow li{
width: 48%;
padding: 15px;
box-sizing: border-box;
border-radius: 1rem;
}

#work .section_wrap .block .box .day_flow li.day{
background: #ecd35d;
}

#work .section_wrap .block .box .day_flow li.night{
background: #4ba4e9;
}

#work .section_wrap .block .box .day_flow li h5{
background: #121212;
padding:10px;
box-sizing: border-box;
font-size: 1rem;
line-height: 1;
color: #FFF;
text-align: center;
border-radius: 50rem;
margin: 0 0 15px;
}

#work .section_wrap .block .box .day_flow li .schedule{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: .8rem;
}

#work .section_wrap .block .box .day_flow li .schedule dt{
width: 90px;
background: #121212;
padding: 3px 5px;
box-sizing: border-box;
text-align: center;
font-weight: 700;
color: #FFF;
border-radius: .3rem;
margin-bottom: 5px;
}

#work .section_wrap .block .box .day_flow li .schedule dd{
width:calc(100% - 95px);
background: #FFF;
padding: 3px 10px;
box-sizing: border-box;
border-radius: .3rem;
margin-bottom: 5px;
}

#work .section_wrap .block .box .st_txt{
padding: 15px;
box-sizing: border-box;
background: #FFF;
margin:20px 0 0;
border-radius: 1rem;
}

}
/*sp*/
@media only screen and (max-width: 768px) {

#work{
position: relative;
margin: 0 auto 120px;
overflow: hidden;
}

#work .section_wrap{
width: 100%;
margin: 0 auto;
position: relative;
min-width: 1200px;
}

#work .section_wrap .block{
overflow: hidden;
margin: 0 auto 100px;
}

#work .section_wrap .block:last-child{
margin-bottom: 0;
}

#work .section_wrap .block .txt_box{
width: 80%;
margin:0 auto 60px;
}

#work .section_wrap .block .txt_box p span{
font-size: 1.4rem;
font-weight: 700;
color: #0a7fd3;
}

#work .illust_img{
width: 60%;
margin: 0 auto 30px;
}

#work .section_wrap .block .box{
width: 80%;
margin: 0 auto;
background: #f0f3f6;
border-radius:1.2rem;
padding:35px;
box-sizing: border-box;
}

#work .section_wrap .block .box h3{
font-size: 1.4rem;
font-weight: 700;
text-align: center;
line-height: 1;
margin: 0 0 20px;
}

#work .section_wrap .block .box p{
font-size: .9rem;
}

#work .section_wrap .block .img{
width: 100%;
margin: 60px 0 0;
}

#work .section_wrap .block .sbox{
width:80%;
border: 1px solid rgba(0,0,0,.3);
padding: 15px;
box-sizing: border-box;
margin: 0 auto 60px;
border-radius: 1.2rem;
}

#work .section_wrap .block .sbox h3{
background:-webkit-linear-gradient(0deg, rgba(0,140,176,1), rgba(0,20,60,1));
padding: 15px 20px;
box-sizing: border-box;
color: #FFF;
border-radius: 50rem;
font-size: 1.4rem;
line-height: 1;
text-align: center;
margin: 0 0 20px;
}

#work .section_wrap .block .sbox ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#work .section_wrap .block .sbox ul li{
width: 49%;
background: #F1F1F1;
padding: 20px;
box-sizing: border-box;
border-radius: 1rem;
position: relative;
text-align: center;
}

#work .section_wrap .block .sbox ul li .img{
border-radius: .6rem;
overflow: hidden;
margin: 0 0 20px;
}

#work .section_wrap .block .sbox ul li h4{
font-size: 1.2rem;
line-height: 1;
margin: 0 0 10px;
}

#work .section_wrap .block .sbox ul li .icon{
position: absolute;
top:-10px;
left: -10px;
width: 50px;
height: 50px;
padding: 10px;
background: #FFF;
box-sizing: border-box;
border-radius: 50%;
}


#work .section_wrap .block .box .day_flow{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#work .section_wrap .block .box .day_flow li{
width: 48%;
padding: 15px;
box-sizing: border-box;
border-radius: 1rem;
}

#work .section_wrap .block .box .day_flow li.day{
background: #ecd35d;
}

#work .section_wrap .block .box .day_flow li.night{
background: #4ba4e9;
}

#work .section_wrap .block .box .day_flow li h5{
background: #121212;
padding:10px;
box-sizing: border-box;
font-size: 1rem;
line-height: 1;
color: #FFF;
text-align: center;
border-radius: 50rem;
margin: 0 0 15px;
}

#work .section_wrap .block .box .day_flow li .schedule{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: .8rem;
}

#work .section_wrap .block .box .day_flow li .schedule dt{
width: 90px;
background: #121212;
padding: 3px 5px;
box-sizing: border-box;
text-align: center;
font-weight: 700;
color: #FFF;
border-radius: .3rem;
margin-bottom: 5px;
}

#work .section_wrap .block .box .day_flow li .schedule dd{
width:calc(100% - 95px);
background: #FFF;
padding: 3px 10px;
box-sizing: border-box;
border-radius: .3rem;
margin-bottom: 5px;
}

#work .section_wrap .block .box .st_txt{
padding: 15px;
box-sizing: border-box;
background: #FFF;
margin:20px 0 0;
border-radius: 1rem;
}


}