@charset "utf-8";
*{
  box-sizing: border-box;
}
img{
  max-width: 100%;
  width: auto;
}
.ofi {
  object-fit: cover;
  object-position: 50% 50%;
  font-family: 'object-fit: cover; object-position: 50% 50%;'
}


.di {display: inline-block;}

main{padding-top:0;}

.top_main02{
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 90px);
  margin-top: 90px;
  background: url(../../images/top_main.jpg) no-repeat right 25% top/ cover;
}

.main_text02{
  box-sizing: border-box;
  flex: 0 1 40%;
  max-width: 820px;
  margin: 2% 0 2% 4%;
  padding: 3%;
  background: rgba(255,255,255,.8);
  text-align: center;
  font-size: 18px;
  line-height: 2.4;
  font-family: 'Noto Serif JP', sans-serif;
  animation: fadeUp 1s ease-in 0s 1;
}
@keyframes fadeUp{
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.main_text02 img{
  max-width: 100%;
}
.main_text_sp{
  display: none;
}
/* -- banner_box -- */
.banner_box{
	padding: 40px 40px 0;
	background: #555;
}
.banner_box .banner_content{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	background: url(../../images/ban_cmmaking.jpg) no-repeat center;
	text-align: center;
}
.banner_box .banner_content a{
	display: block;
	padding: 44px 10px;
}
.banner_box .banner_content img{
	width: 90%;
	max-width: 310px;
}
.banner_box .banner_content a:hover img{
  opacity: 1;
}
.banner_box .banner_content p{
	margin: 1em 0;
	line-height: 2;
	color: #FFF;
}
.banner_box .banner_content .btn{
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding: 1em;
  background: #FFF;
  opacity: 1;
  transition: opacity .3s ease;
}
.banner_box .banner_content a:hover .btn{
	opacity: .8;
}

a.scrollArrow{
  position: absolute;
  width: 90px;
  left: 0;
  right: 0;
  bottom: 74px;
  display: block;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
a.scrollArrow:after{
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  height: 80px;
  border-left: 1px solid #fff;
}

@media screen and (max-width:1600px) {
  .main_text02{
    top: 60%;
  }
}

@media screen and (max-width:1024px) {
  a.scrollArrow{
    display: none;
  }
  .top_main02{
    display: block;
    min-height: auto;
    margin-top: 60px;
    padding-top: 52%;
    background: url(../../images/top_main02.png) no-repeat left 5% center / 47%,
                url(../../images/top_main.jpg) no-repeat center top / contain;
    background-color: #EEE;
  }
  .top_main02 img{
    display: none;
  }
  .main_text02{
    margin: auto;
    background: none;
  }
  .main_text02{
    display: none;
  }
  .main_text_sp{
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: #eee;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 18px;
    text-align: center;
    line-height: 2.4;
    padding: 2.0em;
  }
}
@media screen and (max-width:750px) {

  /* .main_text_sp,　いらない */
  .main_text_sp{
    font-size: 16px;
  }
  /* -- banner_box -- */
  .banner_box{
    padding: 0;
  }
  .banner_box .banner_content{
  background: url(../../images/ban_cmmaking_SP.jpg) no-repeat center / cover;
  }

}
/* ------------------------------------
pick up
--------------------------------------*/
#top_pickup{
  background: #F5F5F5;
}
#top_pickup .exp{
  padding-bottom: 80px;
  text-align: center;
}
#top_pickup .bld_til{
  margin-bottom: 15px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.6;
}

.toppickup_box{
  display: flex;
  flex-flow: row wrap;
  padding-bottom: 70px;
}
.toppickup_box a{
  box-sizing: border-box;
  position: relative;
  width: 30.333%;
  border: 1px solid #ccc;
  margin: 0 1.5% 3%;
  color: #333;
  background: #fff;
  transition: background-color 0.3s, border 0.3s, opacity .4s, transform .5s ease;
}
.toppickup_box a.scaleUp{
    opacity: 0;
    transform: translateY(30px);
}
.toppickup_box a.scaleUpIn{
    opacity: 1;
    transform: translateY(0);
}

.toppickup_box a img{
  opacity: 1;
  transition: opacity .3s ease;
}
.toppickup_box a:hover img{
  opacity: 0.9;
}

.toppickup_box a:hover{
  background: #FFFAFB;
  border: 1px solid #e6001b;
}
.toppickup_box dl{
  box-sizing: border-box;
}
.toppickup_box dt{
  position: relative;
  width: 100%;
  background: #fff;
  line-height: 0;
}
.toppickup_box dt img.ofi {
  width: 100%;
  max-height: 255px;
}

.toppickup_box dd{
  position: relative;
  border-bottom: 1px solid #ccc;
  margin: 20px;
  padding-bottom: 20px;
}


/**/
.com_name{
  font-size: 24px;
  font-weight: bold;
  line-height: 2.0;
}
.com_comme{
  box-sizing: border-box;
  padding: 0 20px 20px;
}
.com_comme p{
  color: #E6001B;
  font-weight: bold;
}
.seizou{
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px 2px;
  border: 2px solid #CCC;
  background: #FFF;
  text-align: center;
  color: #E6001B;
  font-weight: bold;
}
.location:before{
  content: "勤務地 ／ ";
}


.corner_label {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #E6001B 0, #E6001B 50%, transparent 51%, transparent 100%);
  color: #FFF;
}
.corner_label p {
  display: inline-block;
  padding-top: 18px;
  padding-left: 6px;
  font-size: 22px;
  transform: rotateZ(-45deg);
}

.ribbon_label{
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10px;
  padding: 9px 6px 1px;
  background: #F28F49;
  font-weight: bold;
  font-size: 18px;
  color: #FFF;
}
.ribbon_label:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  border-style: solid;
  border-color: #F28F49 #F28F49 transparent #F28F49;
  border-width: 0px 25px 10px;
}

.guideline a:link,
.guideline a:visited{
  display: block;
  max-width: 320px;
  width: 100%;
  background: #333;
  color: #fff;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
  margin: 0 auto;
  transition: background .3s ease;
}
.guideline a:hover,
.guideline a:active{
  background: #666;
}

@media screen and (max-width:1024px) {
  .toppickup_box a{
    width: 47.0%;
  }
  #top_pickup{
    padding-top: 0;
  }
}
@media screen and (max-width: 750px) {
  #top_pickup h1.rec_career{
    margin-bottom: 40px;
  }
  #top_pickup .exp{
    padding-bottom: 40px;
  }
  #top_pickup .bld_til{
    font-size: 28px;
  }
  .toppickup_box{
    padding-bottom: 40px;
  }
  .toppickup_box a{
    width: 100%;
  }
  .toppickup_box dl{
    width: 100%;
    font-size: 0;
    padding: 20px 20px 0;
  }
  .toppickup_box dt,
  .toppickup_box dd{
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
  }
  .toppickup_box dt{
    width: 40%;
  }
  .toppickup_box dd{
    margin: 0;
  }
  .com_name{
    margin-bottom: 0.5em;
    line-height: 1.6;
    font-size: 20px;
  }
  .com_comme:before{
    content: "";
    display: block;
    width: 100%;
    margin: 0 auto 20px;
    border-top: 1px solid #ccc;
  }
  .ofi{
    height: 130px;
  }
  .toppickup_box dd{
    box-sizing: border-box;
    width: 60%;
    border-bottom: none;
    padding-left: 20px;
  }
  .icon01{
    position: static;
    margin-bottom: 7px;
  }
  .ribbon_label ~ dl{
    padding-top: 60px;
  }
  .location:before{
    content: "勤務地 ／ ";
    display: block;
  }
}

/* ------------------------------------
top_message
--------------------------------------*/
#top_message{
  position: relative;
  background: url(../../images/top_message.jpg) right top / cover no-repeat;
  height: 840px;
}
.message_box{
  position: absolute;
  top: 25%;
  left: 5%;
  display: block;
  width: 600px;
}
#top_message h1,
#top_message h2,
#top_voice h1{
  font-family: "Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
#top_message h1{
  color: #E6001B;
  font-size: 32px;
  font-weight: bold;
}

#top_message h2,
#top_voice h1{
  font-size: 62px;
  font-weight: bold;
}
#top_message h2 span,
#top_voice h1 span{
  position: relative;
  font-family: 'Roboto Condensed', sans-serif;
  top: -17px;
  color: #aaa;
  letter-spacing: 0.1em;
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
}
.message_box p{
  line-height: 2.4;
}
.message_box a:link,
.message_box a:visited{
  display: block;
  max-width: 320px;
  width: 100%;
  background: #E6001B;
  color: #fff;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
  margin-top: 30px;
  transition: background .3s ease;
}
.message_box a:hover,
.message_box a:active{
  background: #ED4B5E;
}


/* ------------------------------------
top_voice
--------------------------------------*/
#top_voice h1{
  margin-top: 15px;
}
#top_voice h1 span{
  /* opacity: 0.5; */
  color: rgba(51,51,51,0.5);
}
.voice_area_left,
.voice_area_right{
  position: absolute;
  top: 25%;
  display: block;
  width: 600px;
}
.voice_area_left{
  left: 3%;
}
.voice_area_right{
  right: 3%;
}
.title_box{
  overflow: hidden;
}
.voice_no,
.voice_team{
  box-sizing: border-box;
  background: #E6001B;
  text-align: center;
  color: #fff;
  padding: 0 10px;
  margin-bottom: 10px;
}
span.voice_no{
  display: block;
  width: 145px;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 50px;
  font-size: 30px;
  font-weight: bold;
}
.voice_team{
  line-height: 36px;
  font-size: 16px;
  padding: 10px;
}
.voice_box01 ul{
  font-size: 0;
}
.voice_box01 li{
  display: inline-block;
}

#top_voice{
  width: 100%;
}
#top_voice p{
  line-height: 2.4;
}
#top_voice a:link,
#top_voice a:visited{
  display: block;
  max-width: 320px;
  width: 100%;
  /* background: rgba(255,255,255,0.3); */
  background: rgba(70,70,70,0.5);
  color: #fff;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
  margin-top: 30px;
  transition: background 0.2s ease;
}
#top_voice a:hover,
#top_voice a:active{
  background: rgba(90,90,90,0.4)!important;
}


@media screen and (max-width:1024px) {
  #top_message,
  .voice_area01,
  .voice_area02,
  .voice_area03{
    position: relative;
    height: 650px;
  }
  .message_box,
  .voice_area_right,
  .voice_area_left{
    top: 15%;
    width: 452px;
  }

} /* (max-width:1024px) */


@media screen and (max-width:750px) {
  .message_box,
  .voice_area_right,
  .voice_area_left{
    width: 90%;
  }
  .message_box{
    position: static;
    width: 100%;
    margin: 0 0 60px;
  }
  #top_message,
  #voice_area01,
  #voice_area02,
  #voice_area03{
    background: none;
    height: auto;
  }
  #top_message img,
  #voice_area01 img,
  #voice_area02 img,
  #voice_area03 img{
    width: 100%;
    z-index: 0;
  }

  .voice_area_right,
  .voice_area_left{
    position: static;
    width: 100%;
    margin: 0 auto 60px;
  }
  .voice_box01{
    position: relative;
  }
  .title_box{
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .box_inner,
  .voice_box02{
    width: 90%;
    margin: 0 auto;
  }

  #top_voice .voice_box02 p{
    color: #333;
  }
  #top_message h1{
    font-size: 24px;
  }
  #top_message h2,
  #top_voice h1{
    font-size: 48px;
    color: #FFF;
  }
  #top_voice h1,
  #top_message .box_inner{
    box-sizing: border-box;
    padding: 5% 5% 0;
  }
  #top_voice h1{
    background: rgba(51,51,51,0.5);
  }
  #top_message .box_inner{
    width: 100%;
    background: rgba(51,51,51,0.5);
  }

  #top_message h2 span,
  #top_voice h1 span{
    display: block;
    margin-left: 0;
    color: rgba(255,255,255,0.5);
  }
  .voice_box01 li{
    display: block;
    margin-bottom: 10px;
  }
  .voice_box02{
    padding-top: 40px;
  }

  .message_box a:link,
  .message_box a:visited{
    margin: 30px auto 0;
  }
  #top_voice a:link,
  #top_voice a:visited,
  .message_box a:link,
  .message_box a:visited,
  .guideline a:link,
  .guideline a:visited{
    max-width: 100%;
    width: auto;
  }
  #top_voice a:link,
  #top_voice a:visited{
    background: #333;
  }
  
#top_voice a:hover,
#top_voice a:active{
  background: rgba(50,50,50,0.7)!important;
}

} /* (max-width:750px) */


/* ------------------------------------
経験者募集要項
--------------------------------------*/
#career_guideline{
  padding-bottom: 120px;
  background: #f5f5f5;
}
#career_guideline .bld_sub{
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
#career_guideline .bld_sub span{
  display: inline-block;
}
.guideline_area{
  display: flex;
  margin: 0 0 0;
}
.guideline_area a{
  position: relative;
  width: 31.333%;
  margin: 0 1% ;
  transition: background 0.3s ease;
}
.guideline_area a.regular,
.guideline_area a.part,
.guideline_area a.syougai{
  box-sizing: border-box;
  background: #fff;
}
.guideline_area a.regular{
  border: 2px solid #E6001B;
}
.guideline_area a:hover.regular{
  background: #FDEBED;
}
.guideline_area a.part{
  border: 2px solid #45B0E6;
}
.guideline_area a:hover.part{
  background: #E7F5FB;
}
.guideline_area a.syougai{
  border: 2px solid #CCB852;
}
.guideline_area a:hover.syougai{
  background: #F6F2E1;
}

/*矢印ぼたん*/
.guideline_area a:before,
.guideline_area a:after{
  content: "";
  position: absolute;
  right: 20px;
  bottom: 2.4em;
  vertical-align: bottom;
  transition: right .3s ease;
}
.guideline_area a:hover:before,
.guideline_area a:hover:after{
  right: 15px;
}

.guideline_area a:before{
  width: 15px;
  height: 4px;
  border-top: 1px solid #7a0;
  transform: rotate(30deg);
}
.guideline_area a:after{
  width: 30px;
  height: 1px;
  background: #7a0;
}
.guideline_area a.regular:before{
  border-top: 1px solid #E6001B;
}
.guideline_area a.regular:after{
  background: #E6001B;
}
.guideline_area a.part:before{
  border-top: 1px solid #45B0E6;
}
.guideline_area a.part:after{
  background: #45B0E6;
}
.guideline_area a.syougai:before{
  border-top: 1px solid #CCB852;
}
.guideline_area a.syougai:after{
  background: #CCB852;
}
/*矢印ぼたん end*/

.guideline_area dl{
  box-sizing: border-box;
  padding: 10px;
  font-size: 0;
}
.guideline_area dt,
.guideline_area dd{
  display: inline-block;
  vertical-align: middle;
}
.guideline_area dt{
  max-width: 90px;
  width: 30%;
}
.guideline_area dd{
  box-sizing: border-box;
  width: calc(100% - 30%);
  font-size: 28px;
  padding-left: 20px;
}

.guideline_area a:link dd,
.guideline_area a:visited dd{
  color: #333;
  transition: color .3s ease;
}
.guideline_area a.regular:hover dd,
.guideline_area a.regular:active dd{
  color: #E6001B;
}
.guideline_area a.part:hover dd,
.guideline_area a.part:active dd{
  color: #45B0E6;
}
.guideline_area a.syougai:hover dd,
.guideline_area a.syougai:active dd{
  color: #CCB852;
}
.sub_tit{
  display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.regular .sub_tit{
  color: #E6001B;
}
.part .sub_tit{
  color: #45B0E6;
}
.syougai .sub_tit{
  color: #CCB852;
}
.regular_icon,
.part_icon,
.syougai_icon{
  position: relative;
  width: 100%;
  height: 90px;
}
.regular_icon{
  background: #E6001B;
}
.part_icon{
  background: #45B0E6;
}
.syougai_icon{
  background: #CCB852;
}

.regular_icon img,
.part_icon img,
.syougai_icon img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  max-width: 100%;
  width: auto;
  margin: auto
}
@media screen and (max-width:1045px) {
  .guideline_area dd{
    font-size: 24px;
  }
}
@media screen and (max-width:920px) {
  #career_guideline{
    padding-bottom: 60px;
  }
  .guideline_area{
    display: block;
  }
  .guideline_area a{
    display: block;
    width: 70%;
    margin: 0 auto 20px;
  }
}
@media screen and (max-width:750px) {
  #career_guideline .bld_sub{
    font-size: 20px;
  }
  .guideline_area{
    display: block;
  }
  .guideline_area a{
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
  .guideline_area dd{
    font-size: 28px;
  }
}


/* list_area */
.for_sp{
  display: none;
}
#index .list_area{
  padding-top: 80px;
}
.list_area .new_con{
  text-align: center;
  margin-bottom: 20px;
}
.list_area .new_con span{
  position: relative;
  padding: 5px 10px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: #E6001B;
  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: 0.05em;
}
.list_area .new_con span:after{
  content: "";
  display: inline-block;
  position: absolute;
  width: 1px;
  height: 1px;
  bottom: -13px;
  left: 0;
  right: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top: 8px solid #E6001B;
}
.list_area .main_til{
  width: 250px;
  margin: 0 auto 15px;
}
.list_area .sub_txt{
  text-align: center;
  margin-bottom: 80px;
}
.list_area .bld_til{
  margin-bottom: 60px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.list_area ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
}
.list_area ul li{
  flex: 0 0 47%;
}
.list_area ul li{
  margin-bottom: 45px;
}
.list_area ul li a:hover{
  opacity: 1;
}
.list_area .img_box{
  position: relative;
  margin-bottom: 15px;
}
.list_area .img_box .img{
  font-size: 0;
  overflow: hidden;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.15);
}
.list_area .img_box .img img{
  transform: scale(1);
  transition: transform 0.3s;
  max-width: 100%;
  width: auto;
}
.list_area ul li a:hover .img_box img{
  transform: scale(1.05);
}
.list_area .img_box .new_ico{
  position: absolute;
  top: -10%;
  left: -5%;
  width: 60px;
  height: 60px;
  padding: 14px 8px;
  background: #FFFF00;
  color: #000;
  border-radius: 100%;
  font-family: 'Roboto Condensed',sans-serif;
}
.list_area .img_box .new_ico span{
  display: block;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
.list_area .img_box .new_ico .day{
  margin-bottom: 4px;
  font-size: 16px;
}
.list_area .img_box .new_ico .txt{
  font-size: 12px;
}
.list_area .txt_box{
  position: relative;
  font-family: 'Roboto Condensed', sans-serif;
}
.list_area .txt_box .ico{
  position: absolute;
  top: -82px;
  left: 10px;
  flex: 0 0 60px;
  text-align: center;
}
.list_area .txt_box .ico .mov_ico{
  font-size: 0;
}
.list_area .txt_box .ico svg{
  width: 42px;
  height: 32px;
  fill: #666;
}
.list_area a:hover .txt_box .ico svg{
  fill: #E6001B;
}
.list_area .txt_box .ico p{
  font-size: 20px;
  font-weight: bold;
  color: #666;
}
.list_area a:hover .txt_box .ico p{
  color: #E6001B;
}
.list_area .txt_box .txt{
  flex: 1 1 auto;
  font-weight: bold;
  color: #333;
}
.list_area .txt_box .txt .team{
  margin-bottom: 5px;
  font-size: 13px;
  font-family: "游明朝";
}
.list_area .txt_box .txt .team span{
  display: inline-block;
}
.list_area .txt_box .txt .name{
  font-size: 24px;
  line-height: 1.4;
  font-family: "游明朝";
}
.list_area .txt_box .txt .name span{
  display: inline-block;
}
.list_area .txt_box .txt .en{
  font-size: 14px;
  color: #CCCCCC;
  letter-spacing: 0.1em;
}

@media screen and (min-width:600px) {
    .for_sp{
      display: block;
    }
    /* list_area */
    .list_area .img_box .new_ico{
      top: -20px;
      left: -20px;
      width: 82px;
      height: 82px;
      padding: 20px 11px;
    }
    .list_area .img_box .new_ico .day {
        font-size: 22px;
    }
    .list_area .img_box .new_ico .txt {
        font-size: 16px;
    }
    .list_area .txt_box{
        display: flex;
        justify-content: space-between;
    }
    .list_area .txt_box .ico{
        position: relative;
        top: 0;
        left: 0;
        flex: 0 0 60px;
        padding-right: 15px;
    }
    .list_area .txt_box .txt .name{
        font-size: 32px;
    }
}
@media screen and (min-width:600px) {
  .list_area .main_til{
    width: 338px;
    margin: 0 auto 25px;
  }
}
@media screen and (min-width: 960px){
  /* list_area */
  .list_area ul{
      max-width: 100%;
      justify-content: center;
  }
  .list_area ul li{
      flex: 0 0 28%;
      width: 30%;
      margin-right: 8%;
      margin-bottom: 80px;
  }
  .list_area ul li:nth-child(3n),
  .list_area ul li:last-child{
      margin-right: 0;
  }
}