@charset "utf-8";
/* CSS Document */
html {
  scrollbar-gutter: stable;
}

body{
background: #F6F1EA;
}

img{
max-width: 100%;
}

.musubi_header{
width:100%;
max-width: 94%;
margin: 20px auto;
}

.musubi_header .logo{
max-width: 33%;
}

.musubi_header ul{
margin-top: 15px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap:wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}

.musubi_header ul li{
margin-left: 35px;
font-size:14px;
}

.musubi_header ul li a{
text-decoration: none;
}

.musubi_mv{
width:100%;
margin-bottom: 60px;
line-height: 0;
background: #fad73f;
text-align: center;
}

.musubi_h2{
margin: 0 50px;
}

.musubi_h2 .num{
width: 90px;
color:#FAD73E;
font-size:64px;
font-weight:bold;
font-family: "Osaka-mono", "MS Gothic", "monospace";
}

.musubi_h2 .ttl{
width: calc(100% - 90px);
border-top: 1px solid #545452;
margin-top: 5px;
padding: 10px 0 20px 10px;
color:#545452;
font-size:28px;
font-weight:bold;
}

.musubi_h2 .ttl span{
display: block;
color:#545452;
font-size:12px;
font-weight:normal;
padding-top: 8px;
}

.newjobs{
margin: 0 50px 120px 0;
}

.newjobs ul li{
width: 48%;
margin-bottom: 20px;
float: left;
}

.newjobs ul li img{
float: left;
margin-right: 20px;
}

.newjobs ul li p{
font-size:18px;
}

.newjobs ul li:first-child{
position: relative;
margin-right: 4%;
padding-left: 50px;
}

.newjobs ul li:first-child img{
  display: block;
  width: 100%;
  filter: drop-shadow(-50px 50px 0px #FAD73E);
}

.newjobs ul li:first-child p{
position:absolute;
bottom:80px;
color: #FFFFFF;
padding: 0 15px;
font-size:20px;
}

.newjobs ul li .jobtype{
font-size:12px;
margin-top: 20px;
}

.newjobs ul li:first-child .jobtype{
position:absolute;
bottom:10px;
color: #FFFFFF;
padding: 0 15px;
}

.newjobs ul li .jobtype .status{
border: 1px solid #000000;
padding: 1px 8px 2px;
line-height: 1;
border-radius: 5px;
font-size:12px;
}

.newjobs ul li:first-child .jobtype .status{
border: 1px solid #FFFFFF;
}

.newjobs ul li .jobtype .prof{
padding: 10px 0;
}

.more_arrow{
clear: both;
margin: 0 0 50px;
text-align: right;
}

.more_arrow a{
font-size:14px;
padding:5px 30px 5px 0;
text-decoration: none;
background: url("../img/recruit_top/arrow.png") right center no-repeat;
border-bottom: 1px solid #545452;
}

.musubi_kokoromite{
margin: 0 50px;
}

.musubi_kokoromite ul li img{
float: left;
margin-right: 20px;
}

.musubi_kokoromite ul li{
width: 48%;
margin-bottom: 20px;
float: left;
}

.musubi_kokoromite ul li p{
font-size:16px;
}

.musubi_kokoromite ul li:first-child{
position: relative;
margin-right: 4%;
padding:30px  30px 0 0;
background: url("../img/recruit_top/yellow.png") top right no-repeat;
background-size: 40% auto;
}


.musubi_kokoromite ul li:first-child p{
clear: both;
padding-top: 10px;
font-size:20px;
}

.musubi_kokoromite ul li .jobtype{
font-size:12px;
margin-top: 20px;
}

.musubi_kokoromite ul li .jobtype .status{
border: 1px solid #000000;
padding: 1px 8px 2px;
line-height: 1;
border-radius: 5px;
font-size:12px;
}

.musubi_kokoromite ul li:first-child .jobtype .status{
background: #F6F1EA;
}

.musubi_kokoromite ul li .jobtype .prof{
padding: 10px 0;
}

.musubi_kokoromite .more{
clear: both;
}

.journey {
padding: 0 50px;
position: relative;
}

.journey::before {
  content: "";
  position: absolute;
  bottom: 42%;
  left: 0;
  width: 100%;
  height: 22%; 
  background-color: #FAD73E; 
  z-index: -1; 
}

.journey ul{
margin-bottom: 30px;
}

.journey ul li{
width: 20%;
max-width: 180px;
}

.journey ul li p{
margin-top: 15px;
font-size:16px;
}

.recruit_search{
margin: 50px 0 100px;
padding: 50px 0 50px;
background-color: #FFFFFF;
width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.findjob{
margin: 0 50px ;
}

.findjob .search{
width: 64%;
}

.findjob .search input, .findjob .search select{
padding: 10px 15px;
border: 1px solid #545452;
font-size:12px;
margin-bottom: 10px;
border-radius: 10px;
margin-right: 1%;
}

.findjob .search input{
width: 34%;
}

.findjob .search input[type="submit"] {
width: 28%;
margin-right: 0;
padding: 6px 15px;
background: #FAD73E;
border: none;
font-size:16px;
}

.findjob .search select{
width: 48%;
}


.findjob .search_img{
width: 35%;
}

.pickup {
padding:0 50px;
position: relative;
}

.pickup::before {
  content: "";
  position: absolute;
  bottom: 45%;
  left: 0;
  width: 50%;
  height: 35%;
  background-color: #FAD73E; 
  z-index: -1; 
}

.pickup::after {
  content: "";
  position: absolute;
  bottom: 25%;
  right: 0;
  width: 50%;
  height: 35%;
  background-color: #FAD73E; 
  z-index: -1; 
}

.pickup ul li{
width:32%;
}

.pickup ul li p{
font-size:16px;
}

.bnr_block{
margin: 100px auto 0;
}

.bnr_block .col_l{
width: 59.5%;
line-height: 0;
}

.bnr_block .col_r{
width: 40.5%;
line-height: 0;
}

.bnr_block a{
display: block;
position:relative; 
}

.block_ttl{
position: absolute;
top:25px;
left:25px;
font-size:16px;
color:#FFFFFF;
background: url("../img/recruit_top/ttl_bg.png") right top no-repeat;
padding:0 20px 20px 0;
line-height: 1.5;
}

.musubi_about{
margin: 50px 0 100px;
padding: 50px 0 50px;
background-color: #FFFFFF;
width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.musubi_about .musubi_h2 .ttl{
background: url("../img/recruit_top/h2_ribon.png") 220px 10px no-repeat;
}

.musubi_about h3{
font-size:20px;
margin:30px 0 30px;
padding: 0 50px;
}

.musubi_about p{
font-size:16px;
margin-bottom: 30px;
padding: 0 50px;
line-height: 1.8;
}


.musubi_footer{
border-top:2px solid #FAD73E;
background: #545452;   
position: relative;
width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
}

.musubi_footer .footer_cnt{
position: relative;
 
 padding: 50px 30px 30px;
max-width: 1260px;
width:100%;
margin: 0 auto;
}

.musubi_footer .footer_logo{
width: 45%;
text-align: center;
}

.musubi_footer .footer_logo p{
margin:10px 0 0 180px;
}

.musubi_footer .sitemap {
width: 430px;
}

.musubi_footer .sitemap .work_style{
width: 180px;
}

.musubi_footer .sitemap ul{
width: 250px;
}

.musubi_footer .sitemap ul ul.sub{
width: 100%;
margin-top: 10px;
}

.musubi_footer .sitemap ul li{
margin-bottom: 10px;
font-size:12px;
}

.musubi_footer .sitemap ul li a{
color: #FFFFFF;
text-decoration: none;
}

.musubi_footer .sitemap ul li ul li:before{
content:" - ";
color: #FFFFFF;
}

.sns{
margin: 20px 0;
}

.sns li{
margin-left: 10px;
}

.footer_menu li{
font-size:10px;
margin-right: 20px;
}

.footer_menu li a{
color: #FFFFFF;
text-decoration: none;
}

.copyright{
font-size:10px;
color: #FFFFFF;
position: absolute;
bottom:30px;
right: 30px;
}

.sp{
display: none;
}

/* 全体のレイアウト（横並びにする） */
.ticker-container {
display: flex;
align-items: center;
border-top: 2px solid #545452;
border-bottom: 2px solid #545452;
color: #545452;
margin: 20px 50px 100px;
padding: 10px 0 25px;
overflow: hidden;
height: 48px;
background: #FFFFFF;
}

.ticker-brand:hover {
text-decoration: underline;
}

/* スクロールエリア（隠し領域） */
.ticker-wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* 流れるリンク群（横一列に並べる） */
.ticker-item {
padding: 0 0 20px;
  display: flex;
  white-space: nowrap;
  width: max-content;
  /* アニメーション名, 秒数, 一定速度, 無限ループ */
  animation: scroll-left 25s linear infinite;
}

/* 各テキストリンクのスタイル */
.ticker-item a {
  color: #545452;
  text-decoration: none;
  margin-right: 40px; /* リンク同士の間隔 */
  font-size: 14px;
}
.ticker-item a:hover {
  color: #666666; /* ホバー時の文字色（お好みで） */
  text-decoration: underline;
}

/* マウスオーバー時にアニメーションを止めるクラス */
.ticker-wrap.is-paused .ticker-item {
  animation-play-state: paused;
}

/* 右から左へ流れるアニメーション定義 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 要素全体の半分（複製した分）の幅だけ移動してループ感を作る */
    transform: translateX(-50%);
  }
}





/********************************
レスポンシブ
********************************/
@media screen and (max-width: 991px) {
.musubi_header{
width:100%;
max-width: 720px;
margin: 0 auto;
}

.musubi_header .logo{
max-width: 100%;
width:400px;
margin:5px auto;
text-align: center;
}
    
.musubi_header ul{
width:100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
-webkit-justify-content: space-between;
justify-content: space-between;
flex-wrap:wrap;
}

.musubi_header ul li{
margin-left: 0;
margin-right: 0;
}

.musubi_h2 {
margin: 0;
}

.newjobs{
margin: 0;
}

.newjobs ul li img{
margin-right: 10px;
}

.newjobs ul li p{
font-size:14px;
}

.newjobs ul li:first-child{
padding-left:0;
}

.newjobs ul li:first-child img{
  filter:none;
}

.newjobs ul li:first-child p{
font-size:16px;
}

.newjobs ul li .jobtype{
margin-top: 10px;
}

.newjobs ul li .jobtype .status{
padding: 1px 5px 2px;
font-size:10px;
}

.newjobs ul li:first-child .jobtype .status{
border: 1px solid #FFFFFF;
}

.newjobs ul li .jobtype .prof{
padding: 10px 0;
}

.musubi_kokoromite{
margin: 0;
}

.musubi_kokoromite ul li img{
width:50%;
margin-right: 10px;
}

.musubi_kokoromite ul li:first-child img{
width:100%;
}

.musubi_kokoromite ul li p{
font-size:14px;
}

.musubi_kokoromite ul li:first-child{
padding:0;
background:none;
}

.musubi_kokoromite ul li:first-child p{
font-size:16px;
}

.musubi_kokoromite ul li .jobtype{
margin-top: 10px;
}

.musubi_kokoromite ul li .jobtype .status{
padding: 1px 5px 2px;
font-size:10px;
}

.musubi_kokoromite ul li:first-child .jobtype .status{
background: #F6F1EA;
}

.musubi_kokoromite ul li .jobtype .prof{
padding: 10px 0;
}

.musubi_kokoromite .more{
clear: both;
}

.ticker-container {
margin: 20px 0 70px;
}

.journey {
padding: 0;
}

.journey::before {
  height: 0;
}

.journey ul li{
width: 18%;
}

.journey ul li p{
font-size:14px;
}

.findjob{
margin: 0;
}

.pickup {
padding:0;
}

.pickup::before {
  height: 0;
}

.pickup::after {
  height: 0;
}

.pickup ul li p{
font-size:14px;
}

.musubi_about h3{
padding: 0;
}

.musubi_about p{
padding: 0;
line-height: 1.5;
}

    
.musubi_footer .footer_cnt {
    padding: 50px 0 30px;
}

.musubi_footer .footer_logo{
width: calc(100% - 380px);
text-align: center;
}

.musubi_footer .footer_logo p{
margin:10px 0 0 180px;
}

.musubi_footer .sitemap {
width: 320px;
}

.musubi_footer .sitemap .work_style{
width: 150px;
}

.musubi_footer .sitemap ul{
width: 170px;
}    
}

@media screen and (max-width: 764px) {
.sp{
display: block;
}

.pc{
display: none;
}
    
.musubi_header {
width: 94%;
padding: 10px 0 0;
    }
    
.musubi_h2{
max-width: 94%;
margin: 0 auto;
    }
    
.musubi_h2{
max-width: 94%;
margin: 0 auto;
    }
    
    .newjobs, .musubi_kokoromite, .journey,  .pickup, .findjob{
max-width: 94%;
margin: 0 auto;
    }

.musubi_about h3{
padding: 0 20px;
}

.musubi_about p{
padding: 0 20px;
}

    
.musubi_footer .footer_logo{
width:100%;
}

.musubi_footer .footer_logo p{
margin:10px 0 0 180px;
}

.musubi_footer .sitemap {
width:400px;
margin: 50px auto 0;
}

.musubi_footer .sitemap .work_style{
width: 50%;
}

.musubi_footer .sitemap ul{
width: 50%;
}    
    
}

@media screen and (max-width: 540px) {
.musubi_h2 .ttl {
    font-size: 22px;
}    
    
 .musubi_header ul li{
font-size:12px;
}
    
.newjobs ul li {
    width: 100%;
    float: none;
}
    
.newjobs ul li {
    width: 100%;
    float: none;
}
    
.newjobs ul li:first-child img {
float:none;
}    
    
.newjobs ul li:first-child p {
    position: relative;
    bottom: 0;
    color: #000000;
    padding:10px 0 0;
}
 
.newjobs ul li:first-child .jobtype {
    position: relative;
    bottom: 0;
    color: #000000;
    padding: 0 ;
}    
    
    .newjobs ul li:first-child .jobtype .status {
        border: 1px solid #000000;
    }
    
.musubi_kokoromite ul li {
    width: 100%;
    float:none;
}

.journey ul li {
width: 48%;
margin-bottom: 10px;
    }  

    
.findjob .search {
    width: 100%;
}
    
.pickup ul li {
width: 48%;
margin-bottom: 20px;
}
    
.recruit_search{
margin: 50px 0;
}
    
.findjob .search_img {
    width: 100%;
}
    

.musubi_about .musubi_h2 .ttl{
background: url("../img/recruit_top/h2_ribon.png") right bottom no-repeat;
}

.musubi_about h3{
font-size:16px;
}

.musubi_about p{
font-size:14px;
margin-bottom: 20px;
}

    
.bnr_block {
    margin: 40px auto 0;
}
    
.bnr_block .col_l {
    width: 100%;
}
    
.bnr_block .col_r{
    width: 100%;
}
    
.musubi_footer .footer_cnt {
    width: 90%;
}

.musubi_footer .footer_logo {
    width: 100%;
}

.musubi_footer .sitemap {
    margin-top: 20px;
    width: 100%;
}

.copyright {
    bottom: 10px;
}

}