html {
  font-size: 62.5%;
}

*{
  box-sizing: border-box;
}

body{
  margin: 0;
  font: normal 14px/1.6 メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}

::placeholder{
  color:#ccc
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 5rem 0 0;
  max-height:70%;
}

.stepbar {
  position: fixed;
  width: 100%;
  /*height: 108px;*/
  /*height: 70px;*/
  height: 60px;
  top: 0;
  z-index: 10;
  /*padding-top: 38px;*/
  /*padding-top: 5px;*/
  background-color: #E0ECFF;
  box-shadow: 0px 3px 8px 0px rgb(69 88 115 / 30%);
}

.step{
  display: flex;
  /*justify-content: start;*/
  justify-content: center;
  li {
    list-style: none;
  
    color: #b9d4ff;
    /*font-size: 26px;*/
    font-size: 22px;
    font-weight: bold;
    text-align: center;
  
    /*width:4.8rem;*/
    /*height:4.8rem;*/
    width:4.0rem;
    height:4.0rem;
    border-radius:50%;
    background:#ffffff;
  
    /*display:flex縺ｧ荳ｭ螟ｮ驟咲ｽｮ*/
     display:flex;
     align-items:center;
     justify-content:center;
     margin-right: 5.2rem;
  }
  li:after {
    position: absolute;
    width: 30px;
    height: 6px;
    border-radius:3px;
    content: '';
    background-color: #FFFFFF;
    margin-left: 100;
  }
  li:last-child:after {
    width: 0;
    height: 0;
    border-radius:0;
    content: '';
    background-color: none;
    margin-left: 0;
  }
  li.active,li.completed {
    background:#3788F7;
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
  }
}

.step li.active:after {
  background-color: #3788F7;
}

.step li.completed:after {
  background-color: #3788F7;
}

.pagetitle {
  /*margin: 18.45rem 0 6rem;*/
  /*margin: 15rem 0 0;*/
  margin: 7rem 0 0;
  text-align: center;
}

.form-area{
  margin: 0 auto;
  text-align: center;
}

.select-bar-area{
  display: block;
  justify-content: flex-start;
  text-align: center;
  margin: auto;
}

.select-bar {
  width: 62rem;
  height: 8rem;
  margin-bottom: 2rem;
  font-size: 2.6rem;
  border-radius: 1rem;
  color: #D6D6D6;
  border-color: #D6D6D6;
  padding-left: 2.8rem;
}

.select-bar_active{
  color: #0067B7;
  border-color: #0067B7;
}

.select-bar-s {
  border-radius: 1rem;
  border-color: #B9D4FF;
  padding: 0.5rem;
font-size:20px;
color: #0067B7;
}

.input-bar {
  width: 62rem;
  height: 8rem;
  margin-bottom: 2rem;
  font-size: 2.6rem;
  border-radius: 1rem;
  color: #D6D6D6;
  border-color: #D6D6D6;
  padding-left: 2.8rem;
}

.input-bar_active{
  color: #0067B7;
  border-color: #0067B7;
}

.input-bar-s {
  border-radius: 1rem;
  border-color: #B9D4FF;
  padding: 0.5rem;
font-size:20px;
color: #0067B7;
}
.language_selectbtn-area{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  .btn{
    /*width: 24rem;*/
    width: 40%;
    height: 10rem;
    margin: 0 0 2rem 0;
  	font-size: 2.8rem;
  	line-height: 2.8rem;
  	padding: 3.2rem 4rem;
  	min-width: 24rem;
  }
}

.btn_wrap{
  display: flex;
  align-items: center;
}

.btn {
  margin: auto;
  text-align: center;
  background-color: #3788F7;
  color: #FFFFFF;
  font-size: 2.4rem;
  line-height: 2.4rem;
  font-weight: bold;
  border: none;
  padding: 2rem 1rem;
  min-width: 18rem;
  padding-inline: 2em;
  border-radius: 2em;
  box-shadow: 0px 3px 8px 0px rgb(69 88 115 / 30%);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
  a{
    color: #FFFFFF;
  }
  a:visited{
    color: #FFFFFF;
  }
  cursor:pointer;
  button{
    color: #FFFFFF;
  }
  button:visited{
    color: #FFFFFF;
  }
  p{
    margin: 0 0 0 2rem;
  }
}

.btn_s {
  margin: auto;
  text-align: center;
  background-color: #3788F7;
  color: #FFFFFF;
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: bold;
  border: none;
  padding: 1rem 0.5rem;
  /*min-width: 18rem;*/
  padding-inline: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0px 1px 2px 0px rgb(69 88 115 / 30%);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
  a{
    color: #FFFFFF;
  }
  a:visited{
    color: #FFFFFF;
  }
  cursor:pointer;
  button{
    color: #FFFFFF;
  }
  button:visited{
    color: #FFFFFF;
  }
}

.footet-btn {
  text-align: center;
  background-color: #3788F7;
  color: #FFFFFF;
  font-size: 2.4rem;
  line-height: 2.4rem;
  font-weight: bold;
  border: none;
  padding: 2rem 1rem;
  min-width: 18rem;
  padding-inline: 2em;
  border-radius: 2em;
  box-shadow: 0px 3px 8px 0px rgb(69 88 115 / 30%);
  a:visited{
    color: #FFFFFF;
  }
  cursor:pointer;
}

.footet-btn_unactive{
  background-color: #D6D6D6;
  cursor:default;
}

.nav_bottom {
	/*margin-top:3em;*/
	margin-top:1em;
  background-color: #FFFFFF;
  /*position: fixed;*/
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100px;
  padding: 0 40px;
  bottom: 0;
  z-index: 10;
  box-shadow: 0px -3px 8px 0px rgb(69 88 115 / 30%);
}

.nav_bottom_between {
  justify-content: space-between;
}

.nav_bottom_complete {
  background-color: #E0ECFF;
}

.nav_bottom_btn {
  text-align: right;
}

.mov_thumb_area_wrap{
  width: 100%;
  /*height: 100vh;*/
  /*height: 75vh;*/
  height: 50vh;
  display: flex;
  align-items: center;
}

.mov_thumb_area{
  width: 32rem;
  height: 23.5rem;
  margin: auto;
}

.mov_thumb_img{
  margin: 0;
  width: 32rem;
}

.mov_thumb_title{
  font-size: 2.4rem;
  width: 100%;
  text-align: center;
  margin-top: 2rem;
  color: #0067B7;
}

.table_wrap{
  /*height: 100%;*/
}

.container table{
  width: 920px;
  border-spacing : 0;
}

.container table tr td {
  border: solid 1px #B9D4FF;
  /*font-size: 26px;*/
  font-size: 18px;
  color: #0067B7;
  /*padding: 20px;*/
  /*padding: 10px;*/
  padding: 7px;
}

.container table tr th {
  border: solid 1px #B9D4FF;
  font-size: 18px;
  font-weight: normal;
  color: #0067B7;
}

.language_select li {
  display: inline-block;
  margin-bottom: 40px;
}

h1 {
  color: #0067b7;
  font-size: 26px;
  text-align: center;
}

.language_select {
  width: 780px;
}

a {
  text-decoration: none;
}

.checkbox_text{
  font-size: 2.3rem;
  color: #D6D6D6;
}

.checkbox-area{
  input[type="checkbox"]:checked+label{
    color: #0067B7;
  }
}

input.alert{
  font-weight: bold;
  background-color: rgba(246, 80, 97, 0.16);
  color: #0067B7;
}

input.alert::placeholder {
  color: #0067B7;
}

.shooted_img_list{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 2rem;
  li{
  	/*
    width: 24rem;
    height: 18rem;
    */
    width: 20rem;
    height: 15rem;
    border: #D6D6D6 solid .1rem;
    position: relative;
    margin: 0 1rem 1rem 0;
    .clase_btn{
      position: absolute;
      top: -1rem;
      right: -1rem;
      margin: 0;
      img{
        width: 6rem;
        height: 6rem;
      }
    }
  }
}

.shashin_sentaku{
  display: flex;
  li{
    display: block;
    width: 24rem;
    margin-right: 1rem;
    .set{
      height: 18rem;
      border: .1rem solid #D6D6D6;
      position: relative;
      display: flex;
      width: 100%;
      overflow: hidden;
    }
  }
  .file{
    position: absolute;
    z-index: 2;
    margin: auto;
    top: 37%;
    left: 6rem;
  }
  .file::file-selector-button{
    display: block;
  }
  .file_title{
    font-size: 1.8rem;
    color: #0067B7;
    text-align: center;
  }
  .set figure{
    width: 100%;
    position: relative;
    margin: 0;
    overflow: hidden;
  }
}

.chk_ok{
	cursor:pointer;
}
.chk_ok:disabled{
	cursor:default;
}
/*署名*/
.signature_area{
    text-align: center;
    margin-top:10px;
}
#signature {
/*margin: 10px 0px;*/
margin: 10px auto;
border: 1px solid #000;
/*
width: 400px;
height:auto;
*/
}

/*ローディング*/
#step8 .hide {
  display: none;
}

#step8 .loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  background-image: url(https://gimmicklog.com/demo/loading/img-loading.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: 150px 150px;
  z-index:5000;
}


/* ---------- width */
.wd1 {width: 1% !important;}
.wd2 {width: 2% !important;}
.wd3 {width: 3% !important;}
.wd4 {width: 4% !important;}
.wd5 {width: 5% !important;}
.wd6 {width: 6% !important;}
.wd7 {width: 7% !important;}
.wd8 {width: 8% !important;}
.wd9 {width: 9% !important;}
.wd10 {width: 10% !important;}
.wd15 {width: 15% !important;}
.wd20 {width: 20% !important;}
.wd25 {width: 25% !important;}
.wd30 {width: 30% !important;}
.wd35 {width: 35% !important;}
.wd40 {width: 40% !important;}
.wd45 {width: 45% !important;}
.wd50 {width: 50% !important;}
.wd55 {width: 55% !important;}
.wd60 {width: 60% !important;}
.wd65 {width: 65% !important;}
.wd70 {width: 70% !important;}
.wd75 {width: 75% !important;}
.wd80 {width: 80% !important;}
.wd85 {width: 85% !important;}
.wd90 {width: 90% !important;}
.wd95 {width: 95% !important;}
.wd100 {width: 100% !important;}

/* ---------- align */
.alc { text-align: center !important;}
.alr { text-align: right !important;}
.all { text-align: left !important;}

.alt { vertical-align: top !important;}
.alb { text-align: bottom !important;}

/* ---------- margin,padding */
.mb0 {	margin-bottom: 0px !important;}
.mb5 {	margin-bottom: 5px !important;}
.mb10 {	margin-bottom: 10px !important;}
.mb15 {	margin-bottom: 15px !important;}
.mb20 {	margin-bottom: 20px !important;}
.mb25 {	margin-bottom: 25px !important;}
.mb30 {	margin-bottom: 30px !important;}

.ml0 {	margin-left: 0px !important;}
.ml5 {	margin-left: 5px !important;}
.ml10 {	margin-left: 10px !important;}
.ml20 {	margin-left: 20px !important;}
.ml30 {	margin-left: 30px !important;}

.mr0 {	margin-right: 0px !important;}
.mr5 {	margin-right: 5px !important;}
.mr10 {	margin-right: 10px !important;}
.mr20 {	margin-right: 20px !important;}
.mr30 {	margin-right: 30px !important;}

.mt0 {	margin-top: 0px !important;}
.mt5 {	margin-top: 5px !important;}
.mt10 {	margin-top: 10px !important;}
.mt20 {	margin-top: 20px !important;}
.mt30 {	margin-top: 30px !important;}

/* ---------- font size */
.fs10 { font-size:77% !important;}
.fs11 { font-size:85% !important;}
.fs12 { font-size:93% !important;}
.fs13 { font-size:100% !important;}
.fs14 { font-size:108% !important;}
.fs15 { font-size:116% !important;}
.fs16 { font-size:123.1% !important;}
.fs17 { font-size:131% !important;}
.fs18 { font-size:138.5% !important;}
.fs19 { font-size:146.5% !important;}
.fs20 { font-size:153.9% !important;}
.fs21 { font-size:161.6% !important;}
.fs22 { font-size:167% !important;}
.fs23 { font-size:174% !important;}
.fs24 { font-size:182% !important;}
.fs25 { font-size:192.3% !important;}
.fs26 { font-size:197% !important;}
.fs30 { font-size:227.3% !important;}