@charset "utf-8";
/* import */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

/* 共通項目 */
body{
  margin:auto;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Segoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}

ul{
	margin:0;
	padding:0;
}
li{
  list-style-type: none;
}
a{text-decoration: none;}
p,dl,dd,h1,h2,h3{margin:0;}
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
#client,#qa,#entry{
  background:#f8eaf2;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*==================
	 PC
==================*/
@media screen and (min-width:769px) {
/* displaynone */
.pc_none{
display: none;
}
#bijocas,#client,#job,#qa,#step,#entry{
padding:100px 0;
}

/* 見出し */
.tit{
    color:#d783b3;
  text-align: center;
  margin-bottom:80px;
  font-size:64px;
}
.tit_s{
  font-size:40px;
}
.tit_m{
  font-size:64px;
}
/* ボタン */
.btn{
  font-size:24px;
  color:#fff;
  background:linear-gradient(90deg,#e87685, #e876b9);
    display: block;
    margin:auto;
    width: 380px;
    padding: 30px 0;
    text-align: center;
}
.btn:hover{
opacity: .7 !important;
transition:.5s;
}


/* mv */
#mv{}
.mv_area{
  background:url(../images/mv.png);
  background-repeat: no-repeat;
  background-size:cover;
  padding: 160px 0 160px 120px;
  background-position: right;
}
.main_text1{
color:#3a2931;
font-weight: bold;
font-size:24px;
}
.main_logo{
margin:60px 0;
}
.main_text2{
  color:#fff;
  font-size:33px;
  font-weight: normal;
  line-height: 2;
}
.mv_rec_text{
  color:#fff;
  background:#3a2931;
  font-size: 20px;
  padding: 30px 0 30px 120px;
}
/* 固定ボタン */
.btnarea{
  position: relative;
}
.btn_ab{
    position: fixed;
    background: #fff;
padding:20px;
  box-shadow: 0 0 10px rgba(215,131,179,1);
  bottom: 50px;
    right: 50px;
    z-index: 100;
    line-height: 1.8;
}
.btn_ab:hover{
opacity: .7;
transition:.5s;
}
.btn_text{
color:#d783b3;
font-size: 20px;
font-weight: bold;
    background: url(../images/kotira.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 75px;
}
.btn_logo{
  width:164px;
}

/* ビジョキャストは */
#bijocas{
background:url(../images/bg.png);
background-repeat: no-repeat;
background-size:100%;
}
.bijocas_textarea{margin-bottom:100px;}
.bijocas_text{
  font-size:24px;
  text-align: center;
  margin-bottom:30px;
  line-height: 1.8;
}

/* 取引先企業 */
.client_area{
background:#fff;
width:1000px;
margin:0 auto 100px;
text-align:center;
padding: 56px 0;
}

/* お仕事の内容例 */
.job_area{
  width:1000px;
  margin:auto;
}
.job1{
  background:url(../images/job_01.png);
}
.job2{
  background:url(../images/job_02.png);
}
.job3{
  background:url(../images/job_03.png);
}
.job4{
  background:url(../images/job_04.png);
}
.job5{
  background:url(../images/job_05.png);
  margin-bottom:50px;
}
.job1,.job2,.job3,.job4,.job5{
    background-repeat: no-repeat;
  padding:100px 0;
  margin-bottom:80px;
}
.job_r{
margin-left: 320px;
}
.job_textarea{
background:rgba(255,255,255,.8);
width:680px;
padding:50px 0 50px 50px;
}
.j_tit{
  font-size:30px;
  color:#d783b3;
  font-weight: bold;
  margin-bottom:30px;
}
.j_text{
  color:#6d5b63;
}

/* よくある質問 */
.qa_content{
  max-width:786px;
  margin:auto;
}
.qa_area{margin-bottom:50px;}
.tit_qa{
  font-size:36px;
  font-weight: bold;
  color:#d783b3;
  border-bottom: solid 2px #d783b3;
  padding-bottom: 20px;
  margin-bottom:30px;
}
.balloon1 {
  position: relative;
  display: inline-block;
  width: 550px;
  padding:28px 0 28px 30px;
  font-size:18px;
  line-height:1.8;
  color: #3a2931;
  background: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  margin: 0 0 30px 118px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 26px;
  left: -30px;
  border: 15px solid transparent;
  border-right: 15px solid #fff;
  z-index: 0;
}
.balloon2 {
  position: relative;
  display: inline-block;
  width: 550px;
  padding:28px 0 28px 30px;
  font-size:18px;
  line-height:1.8;
  color: #3a2931;
  background: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  margin: 0 118px 30px 0;
  float:right;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 26px;
  right: -30px;
  border: 15px solid transparent;
  border-left: 15px solid #fff;
  z-index: 0;
}

.q_text{
  background:url(../images/icon_q.png);
  background-repeat: no-repeat;
}
.a_text{
  background:url(../images/icon_a.png);
  background-repeat: no-repeat;
  background-position: top right;
  overflow: hidden;
}

/* 無料登録から報酬GETまで */
.step_content{
    display: flex;
    color:#6d5b63;
    width: 1000px;
    margin:0 auto 100px;
}
.step_box{
  margin-right: 10px;
  position: relative;
}
.step_box:last-child{
  margin-right: 0;
}
.step_no{
  font-family: 'Dancing Script', cursive;
  font-size:40px;
    position: absolute;
    top: -20px;
}
.step_box_inner{
  background:#f8eaf2;
  width: 242px;
  height: 240px;
  text-align: center;
  padding-top:60px;
}
.step_text{
  margin-top:40px;
}

/* ビジョキャスにエントリー */
.tit_entry{
    color:#d783b3;
  text-align: center;
  margin-bottom:40px;
  font-size:64px;
}
.entry_text{
  color:#3a2931;
  font-size:24px;
  text-align: center;
  margin-bottom:60px;
}
.entry_box{
  background:#fff;
  width:600px;
  margin:auto;
  padding:100px;
}
.contact-text{
  font-size:18px;
  color:#d783b3;
  font-weight: bold;
      display: block;
}
.ct-block{
  margin-bottom:40px;
}
.input_box{
  height: 40px;
  width: 100%;
  font-size: 16px;
  border: solid 1px #999999;
}
.input_box2{
  width: 100%;
  height: 120px;
  font-size: 16px;
  border: solid 1px #999999;
}
.input_box_ad{
  height: 40px;
  width: 20%;
  font-size: 16px;
  border: solid 1px #999999;
}
.input_photo{
  background:#f8eaf2;
  color:#d783b3;
  border:solid 1px #d783b3;
  border-radius: 20px;
     cursor: pointer;
     padding: 10px 30px;
     display: inline-block;
}
.input_photo input{
  display: none;
}
.send-button{
  background:#e87786;
  color:#fff;
  border:none;
  font-size:24px;
  font-weight: bold;
  padding:20px 0;
  width: 200px;
  margin:auto;
  display: block;
}
.send-button:hover{
  opacity: .7;
  transition:.5s;
}

/* footer */
footer{
  background:#3a2931;
  color:#fff;
  padding:40px 0;
}
footer a{
  color:#fff;
  font-size:16px;
}
footer a:hover{
  color:#e89dc8;
  transition:.5s;
}
.footer_text{
width:300px;
margin:auto;
display: flex;
  line-height: 2;
}
.footer_dt{
  margin-right: 40px;
}

/* アップロード周り */
.flex{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-box{
  width: 29%;
}
.flex-box:last-child{
  width: 69%;
}
img#preview{
  max-width: 100%;
  height: auto;
}

.select {
  overflow: hidden;
  height: 40px;
  width: 120px;
  text-align: center;
  float: left;
  margin-right: 20px;
  font-weight: bold;
}
.select select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
}
.select select::-ms-expand {
    display: none;
}
.select {
  position: relative;
  border: 1px solid #999999;
  border-radius: 2px;
  background: #ffffff;
}
.select::before {
  position: absolute;
  top: 1.2em;
  right: 0.9em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666;
  pointer-events: none;
}
.select select {
  padding: 12px 38px 11px 8px;
  color: #666666;
  line-height: 1;
}

}
/*==================
	 SP
==================*/
@media screen and (max-width:768px) {
/* displaynone */

.sp_none{
  display:none;
}

#container{
width:100%;
}
#bijocas,#client,#job,#qa,#step,#entry{
padding:40px 0;
}
/* 見出し */
.tit{
    color:#d783b3;
  text-align: center;
  margin-bottom:40px;
  font-size:32px;
}
.tit_s{
  font-size:20px;
}
.tit_m{
  font-size:32px;
}
.tit_logo{
  width:60%;
}
/* ボタン */
.btn{
  font-size:16px;
  color:#fff;
  background:linear-gradient(90deg,#e87685, #e876b9);
    display: block;
    margin:auto;
    width: 240px;
    padding: 18px 0;
    text-align: center;
}
.btn:hover{
opacity: .7;
transition:.5s;
}
/* mv */
#mv{}
.mv_area{
  background:url(../images/mv_sp.png);
  background-repeat: no-repeat;
  background-size:cover;
  padding:40px 20px;
}
.sp_mainlogoimg{
  width:60%;
}
.main_text1{
color:#3a2931;
font-weight: bold;
font-size:12px;
}
.main_logo{
margin:35px 0;
}
.main_text2{
  color:#fff;
  font-size:14px;
  font-weight: normal;
  line-height: 2;
}
.mv_rec_text{
  color:#fff;
  background:#3a2931;
  font-size: 12px;
  padding: 14px 20px;
}

/* 固定ボタン */
.btnarea{
  position: relative;
}
.btn_ab{
    position: fixed;
    background: #fff;
padding:15px 20px;
  box-shadow: 0 0 10px rgba(215,131,179,1);
  bottom: 20px;
    right: 20px;
    z-index: 100;
    line-height: 1.8;
}
.btn_text{
color:#d783b3;
font-size: 12px;
font-weight: bold;
    background: url(../images/kotira.png);
    background-repeat: no-repeat;
    background-position: right;
background-size: 20px;
    padding-right: 35px;
}

.btn_logo{
  width:100px;
}


/* ビジョキャストは */
#bijocas{
background:url(../images/bg.png);
background-repeat: no-repeat;
background-size:100%;
    background-position: 0 40%;
}
.bijocas_textarea{margin-bottom:40px;}
.bijocas_text{
  font-size:16px;
  text-align:left;
  margin-bottom:30px;
  line-height: 1.8;
  color:#3a2931;
  padding:0 20px;
}

/* 取引先企業 */
.client_area{
    background: #fff;
    text-align: center;
    padding: 30px 0;
    margin: 0 20px 40px;
}
.company_sp{
  width:80%;
}

/* お仕事の内容例 */
.job_area{
}
.job1{
  background:url(../images/job_01_sp.png);
}
.job2{
  background:url(../images/job_02_sp.png);
}
.job3{
  background:url(../images/job_03_sp.png);
}
.job4{
  background:url(../images/job_04_sp.png);
}
.job5{
  background:url(../images/job_05_sp.png);
  margin-bottom:50px;
}
.job1,.job2,.job3,.job4,.job5{
    background-repeat: no-repeat;
    background-size:100%;
  margin-bottom:30px;
  padding:20px;
}
.job_textarea{
background:rgba(255,255,255,.8);
padding:20px 16px;
}
.j_tit{
  font-size:16px;
  color:#d783b3;
  font-weight: bold;
  margin-bottom:15px;
}
.j_text{
  color:#6d5b63;
  font-size:12px;
}

/* よくある質問 */
.qa_content{
  max-width:786px;
  margin:auto;
  padding:20px ;
}
.qa_area{margin-bottom:30px;}
.qa_area:last-child{margin-bottom:0px;}
.tit_qa{
  font-size:24px;
  font-weight: bold;
  color:#d783b3;
  border-bottom: solid 1px #d783b3;
  padding-bottom: 10px;
  margin-bottom:30px;
}
.balloon1 {
position: relative;
    display: inline-block;
    padding: 10px;
    font-size: 12px;
    line-height: 1.8;
    color: #3a2931;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 0 0 15px 65px;
    min-height: 50px;
    width: 60%;
}

.balloon1:before {
    content: "";
    position: absolute;
    top: 10px;
    left: -20px;
    border: 10px solid transparent;
    border-right: 15px solid #fff;
  z-index: 0;
}
.balloon2 {
  position: relative;
  display: inline-block;
  padding:10px;
  font-size:12px;
  line-height:1.8;
  color: #3a2931;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 70px 15px 0;
  min-height: 50px;
  float:right;
  width: 60%;

}

.balloon2:before {
  content: "";
  position: absolute;
  top: 10px;
  right: -20px;
  border: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 0;
}

.q_text{
  background:url(../images/icon_q.png);
  background-repeat: no-repeat;
  background-size: 50px;
}
.a_text{
  background:url(../images/icon_a.png);
  background-repeat: no-repeat;
  background-position: top right;
  overflow: hidden;
    background-size: 50px;
}

/* 無料登録から報酬GETまで */
.step_content{
    color:#6d5b63;
    margin-bottom:40px;
}
.step_box{
    background:#f8eaf2;
    margin:0 40px;
    padding:30px;
  text-align: center;
}
.step_no{
  font-family: 'Dancing Script', cursive;
  font-size:24px;
  margin-bottom:20px;
}
.step_box_inner{
}
.step_text{
  margin-top:20px;
  font-size:16px;
}
.sankaku{
width: 35px;
display: block;
margin:30px auto;
}
/* ビジョキャスにエントリー */
.tit_entry{
    color:#d783b3;
  text-align: center;
  margin-bottom:30px;
  font-size:32px;
}
.entry_text{
  color:#3a2931;
  font-size:16px;
  text-align: center;
  margin-bottom:50px;
}
.entry_box{
  background:#fff;
  margin:0 20px;
  padding:20px;
}
.contact-text{
  font-size:16px;
  color:#d783b3;
  font-weight: bold;
  display: block;
}
.ct-block{
  margin-bottom:30px;
}

.input_box{
  height: 30px;
  width: 95%;
  font-size: 14px;
  border: solid 1px #999999;
  border-radius : 0
}
.input_box,.input_box2{
  -webkit-appearance: none;
}
.input_box2{
  width: 95%;
  height: 80px;
  font-size: 16px;
  border: solid 1px #999999;
  border-radius : 0
}
.input_box_ad{
  height: 30px;
  width: 25%;
  font-size: 14px;
  border: solid 1px #999999;
  border-radius : 0
}
.input_photo{
  background:#f8eaf2;
  color:#d783b3;
  border:solid 1px #d783b3;
  border-radius: 20px;
     cursor: pointer;
     padding: 10px 30px;
     display: inline-block;
}
.input_photo input{
  display: none;
}
.send-button{
  background:#e87786;
  color:#fff;
  border:none;
  font-size:14px;
  font-weight: bold;
  padding:15px 20px;
  width: 140px;
  margin:40px auto;
  display: block;
}
.radiobtn{
  width:12px;
  height: 12px;
}
/* footer */
footer{
  background:#3a2931;
  color:#fff;
  padding:30px 0;
}
footer a{
  color:#fff;
  font-size:16px;
}
.footer_text{
width:300px;
margin:auto;
display: flex;
  line-height: 2;
}
.footer_dt{
  margin-right: 20px;
}

/* アップロード周り */
.flex{
  flex-wrap: wrap;
  overflow: hidden;
}
.flex-box{
  width: 100%;
  margin-bottom: 20px;
}
.flex-box:last-child{
  width: 100%;
}
img#preview{
  max-width: 100%;
  height: auto;
}

.select {
  overflow: hidden;
  height: 40px;
  width: 31%;
  text-align: center;
  float: left;
  margin-right: 2%;
  margin-bottom: 10px;
  font-weight: bold;
  box-sizing: border-box;
}
.select.last{
  margin-right: 0;
}
.select select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
}
.select select::-ms-expand {
    display: none;
}
.select {
  position: relative;
  border: 1px solid #999999;
  border-radius: 2px;
  background: #ffffff;
}
.select::before {
  position: absolute;
  top: 1.2em;
  right: 0.4em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666;
  pointer-events: none;
}
.select select {
  padding: 12px 24px 11px 8px;
  color: #666666;
  line-height: 1;
}
}