@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900");


body {
  font-family: 'Noto Sans JP', sans-serif;
}

strong {
  font-weight: 700;
}

.em {
  color: #cd076e;
}

.sub {
  vertical-align: middle;
  font-size: 60%;
  display: inline-block;
  margin-top: -0.2em;
}

a.linkTxtBl {
  background: url(../img/ico_linkbl.png) left 55% no-repeat;
  padding-left: 18px;
  color: #d6006f;
  text-decoration: underline;
}

a.linkTxt01 {
  color: #d6006f;
  text-decoration: underline;
}

/*-----------------------------------------------------------------*/
.otokuDtl, .cmnFormSec {
  font-size: 16px;
  color: #888888;
}

.noteList li {
  margin-top: 1em;
  list-style: disc;
  margin-left: 1.5em;
}

.noteList02 li {
  font-size: 14px;
  padding-left: 1em;
  text-indent: -1em;
}

/*2019.06.04*/
.noteCol p:not(:first-of-type) {
  margin-top: 1.5em;
}

/*-----------------------------------------------------------------*/
#floorNav {
  position: fixed;
  top: 50%;
  right: 30px;
  z-index: 1900;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  background: url(../img/bg_floor.png) center top repeat-y;
}

#floorNav a {
  display: block;
  margin-bottom: 15px;
  border-radius: 50px;
  background-color: #f0f0f0;
  border: 2px solid #f0f0f0;
  color: #bcbcbc;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-weight: 900;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-decoration: none;
  text-align: center;
}

#floorNav a:last-child {
  margin-bottom: 0;
}

#floorNav a:first-child, #floorNav a.is_active {
  background-color: #ce006f;
  border: 2px solid #ce006f;
  color: #fff;
}

#floorNav a.is_done, #floorNav.all_done a {
  background-color: #fff;
  border: 2px solid #ce006f;
  color: #ce006f;
}

/*-----------------------------------------------------------------*/
#otokuSec {
  border: 10px solid #f0f0f0;
  text-align: center;
  padding: 35px 0 45px;
  border-radius: 6px;
}

.otokuTit {
  margin-left: -12px;
}

.otokuDtl {
  width: 720px;
  margin: 25px auto 0;
  background: url(../img/line.png) left top repeat-x;
  text-align: left;
}

.otokuDtlCont {
  padding-bottom: 25px;
}

.otokuDtl .txtCol {
  padding: 35px 0 35px 105px;
  background: url(../img/pic_otoku.png) left 35px no-repeat;
}

.otokuDtl h4 {
  color: #363636;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 15px;
}

.otokuDtl h5 {
  color: #363636;
  font-weight: 700;
  margin-bottom: 5px;
}

.otokuDtl .txtCol .noteList02 {
  margin-top: 15px;
}

.otokuDtl .noteCol {
  background-color: #f0f0f0;
  padding: 35px 40px;
  font-size: 14px;
  color: #666666;
}

.otokuDtlBtn {
  background: url(../img/line.png) left bottom repeat-x;
  padding: 10px 0;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: #cd006f;
  cursor: pointer;
}

.otokuDtlBtn:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin: 0 10px 4px 0;
  background: url(../img/ico_tgl.png) center center no-repeat;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.otokuDtlBtn .closeTxt {
  display: none;
}

.otokuDtlBtn.is_active .closeTxt {
  display: inline-block;
}

.otokuDtlBtn.is_active .openTxt {
  display: none;
}

.otokuDtlBtn.is_active:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*-----------------------------------------------------------------*/
.cmnFormSec {
  padding: 50px 0;
  border-bottom: 1px solid #e0e0e0;
}

.cmnFormSec .secTit {
  font-size: 22px;
  font-weight: 900;
  color: #363636;
  line-height: 1;
  border-left: 4px solid #cd006f;
  margin-bottom: 20px;
}

.cmnFormSec .secTit.mustTit {
  border-left: none;
}

.cmnFormSec .secTit .mustPt {
  background-color: #cd006f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 5px 6px;
  vertical-align: top;
  display: inline-block;
}

.cmnFormSec .secTit .tit {
  margin-left: 10px;
  display: inline-block;
}

.radioBox {
  overflow: hidden;
  padding-bottom: 2px;
  margin-top: 20px;
}

.radioBox label {
  display: block;
  width: 440px;
  height: 60px;
  text-align: center;
  float: left;
}

.radioBox label:nth-child(even) {
  float: right;
}

.radioBox label input[type="radio"] {
  display: none;
}

.radioBox label input[type="radio"] + .txt {
  display: block;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  background-color: #f0f0f0;
  box-shadow: 0 2px 0 0 #e0e0e0;
  color: #525252;
  cursor: pointer;
}

.radioBox label input[type="radio"] + .txt:before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin: 0 12px 4px 0;
  background: url(../img/ico_notchecked.png) center center no-repeat;
}

.radioBox label input[type="radio"]:checked + .txt {
  background-color: #cd006f !important;
  box-shadow: 0 2px 0 0 #a7005a;
  color: #fff;
}

.radioBox label input[type="radio"]:checked + .txt:before {
  background: url(../img/ico_checked.png) center center no-repeat;
}

.radioBoxL label {
  width: auto;
  text-align: left;
}

.radioBoxL label input[type="radio"] + .txt {
  padding-left: 20px;
}

.logoSendNow {
  margin-top: 20px;
  background-color: #f0f0f0;
  box-shadow: 0 2px 0 0 #e0e0e0;
  color: #525252;
}

.logoSendNow.is_checked {
  background-color: #cd006f;
  box-shadow: 0 2px 0 0 #a7005a;
}

.logoSendNow.radioBoxL label {
  width: 240px;
  min-height: 420px;
  /**/
}

.logoSendNow.radioBox label input[type="radio"] + .txt {
  box-shadow: none;
}

.logoSendNow .uploadBox {
  width: 635px;
  min-height: 420px;
  /**/
  float: right;
  background-color: #fff;
  margin: 5px 5px 3px;
  padding: 20px;
  box-sizing: border-box;
}

.logoNotNow.radioBoxL label {
  float: none;
}

.logoNotNow {
  margin-top: 10px;
}

#drag-drop-wrap {
  color: #aaaaaa;
  font-weight: 700;
  text-align: center;
  float: left;
  border: 3px dotted #ccc;
  width: 408px;
  line-height: 1.4;
  margin-bottom: 20px;
}

#js-drag-drop {
  margin: 5px;
  padding: 50px 0 20px;
  background: #f0f0f0 url(../img/ico_upload.png) center 20px no-repeat;
}

#fileData {
  float: right;
  width: 164px;
  text-align: center;
}

#fileData label {
  width: 164px;
  height: auto;
  min-height: 20px;
  /**/
  background-color: #cd006f;
  color: #fff;
  cursor: pointer;
  float: none;
  text-align: center;
  border-radius: 4px;
  padding: 3px 0 4px;
  margin: 25px 0 10px;
}

#fileInput {
  display: none;
}

#fileData .js-cancel {
  background: #aaa;
  border: none;
  border-radius: 4px;
  padding: 4px 0 5px;
  color: #fff;
  display: block;
  width: 100%;
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
}

.noteBoxMini {
  clear: both;
  font-size: 14px;
  color: #888;
}

.noteBoxMini p {
  margin-top: 12px;
}

.noteBoxMini .attention {
  background-color: #f0f0f0;
  font-weight: 700;
  padding: 2px 10px;
  margin-top: 0;
}

.noteBoxMini .attention:before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 15px;
  vertical-align: middle;
  margin: 0 5px 3px 0;
  background: url(../img/ico_attention.png) center center no-repeat;
}

.noteBoxMini .noteList li {
  margin-top: 3px;
}

.txtBox {
  margin-top: 20px;
}

.txtBox input[type="text"] {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 0 inset #e1e1e1;
  height: 60px;
  width: 100%;
  display: block;
  text-indent: 30px;
  color: #525252;
  font-size: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 60px;
}

.courseBox {
  margin-top: 20px;
}

.courseNoteBox {
  background-color: #f0f0f0;
  padding: 45px 50px;
  position: relative;
  margin-top: 20px;
}

.courseNoteBox:after {
  content: "";
  clear: both;
  display: block;
}

.courseNoteBox .col01 {
  float: left;
  width: 100%;
}

.pageExBox {
  background-color: #f0f0f0;
  padding: 45px 50px;
  position: relative;
  margin-top: 1px;
}

/* .pageExBox:after, */
.pageExBox .row:after {
  content: "";
  clear: both;
  display: block;
}

.pageExBox .col01 {
  float: left;
  width: 380px;
}

.pageExBox .col02 {
  overflow: hidden;
  float: right;
  width: 390px;
  text-align: center;
  position: relative;
}

.selectBox select,
.pageExBox .col02 select {
  width: 100%;
  cursor: pointer;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 0 inset #e1e1e1;
  height: 60px;
  display: block;
  text-indent: 10px;
  color: #525252;
  font-size: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 60px;
}

.selectBox select::-ms-expand,
.pageExBox .col02 select::-ms-expand {
  display: none;
}

.selectBox:before,
.pageExBox .col02:before {
  position: absolute;
  top: 1.7em;
  right: 0.9em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #666666;
  pointer-events: none;
}

.pageExBox .noteArea {
  margin-top: 15px;
}
.pageExBox .noteList02 + .noteList02 {
  margin-top: 10px;
}

/* selectBox ベースはpageExBoxのselectのスタイルを引き継いでいます */
.selectBox{
	position: relative;
}

/* norikaeBox */
.norikaeBox {
  background-color: #f0f0f0;
  padding: 45px 50px;
  position: relative;
  /* margin-top: 20px; */
  margin-top: 1px;
}

.norikaeBox .radioBox label {
  width: 390px;
}

.norikaeBox .radioBox label input[type="radio"] + .txt {
  background-color: #fff;
}

.norikaeService .noteList02 {
  font-size: 14px;
  color: #888888;
  padding-left: 1em;
  text-indent: -1em;
}

.norikae02Box {
  padding-top: 50px;
}

.norikae02Box.is-input .txtBox input[type="text"]{
  background-color: #fff;
}

.siteExBox, .lineSpeedPriorityBox {
  background-color: #f0f0f0;
  padding: 45px 50px;
  margin-top: 1px;
}

.siteExBox .col01, .lineSpeedPriorityBox .col01 {
  float: left;
  width: 380px;
}

.siteExBox .row:after {
  content: "";
  clear: both;
  display: block;
}

.siteExBox .col02, .lineSpeedPriorityBox .col02 {
  overflow: hidden;
  float: right;
  width: 380px;
  text-align: center;
  position: relative;
}

.siteExBox .col02 select, .lineSpeedPriorityBox .col02 select {
  width: 100%;
  cursor: pointer;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 0 inset #e1e1e1;
  height: 60px;
  display: block;
  text-indent: 10px;
  color: #525252;
  font-size: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 60px;
}

.siteExBox .col02 select::-ms-expand, .lineSpeedPriorityBox .col02 select::-ms-expand {
  display: none;
}

.siteExBox .col02:before, .lineSpeedPriorityBox .col02:before {
  position: absolute;
  top: 1.7em;
  right: 0.9em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #666666;
  pointer-events: none;
}

.siteExBox .noteList02, .lineSpeedPriorityBox .noteList02 {
  margin-top: 15px;
}

.urlBox {
  font-size: 20px;
  margin: 20px 0;
}

.urlBox input[type="text"] {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  box-shadow: #e1e1e1 0px 2px 0px inset;
  height: 60px;
  width: 670px;
  text-indent: 30px;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 60px;
  margin: 0px 10px;
}

/*-------------------------------*/
#mailform .cmnFormSec .input_wrap {
  position: relative;
}

#mailform .cmnFormSec .input_wrap .error {
  position: absolute;
  top: -14px;
  height: 18px;
  left: 90px;
  padding: 0 0 4px;
}

#mailform .cmnFormSec .input_wrap .error span {
  display: block;
  height: 16px;
  padding: 2px 8px 0;
  background-color: #d80272;
  font-size: 10px;
  text-align: center;
  line-height: 1.5;
  color: #fff;
  font-weight: normal;
}

/*-------------------------------*/
#userSec {
  background-color: #f0f0f0;
  margin-top: 50px;
  padding: 30px;
}

.userTit {
  font-size: 22px;
  font-weight: 700;
  color: #cd006f;
  text-align: center;
  background: url(../img/pt_user.png) center top no-repeat;
  margin: -55px 0 0 0;
  padding: 65px 0 0;
}

#mailform #formTable {
  border-top: none;
}

#mailform #formTableWrap {
  background: #fff;
  padding: 0 10px 10px;
  border-radius: 5px;
  margin: 20px 0 0;
  border: none;
}

#mailform #formTableWrap input[type="checkbox"] {
  vertical-align: bottom;
}

#mailform #formTable th {
  width: 190px;
}

/*-------------------------------*/
#purposeBox {
  border: 1px solid #e0e0e0;
  margin: 50px 0;
  padding: 26px 30px;
  height: 90px;
  overflow: auto;
}

/*-------------------------------*/
#mailform #agree {
  border: none;
  padding: 0;
  margin: 0;
}

#agreeBox {
  background-color: #f0f0f0;
  padding: 45px 50px;
  position: relative;
  margin-bottom: 50px;
}

#agreeBox:before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -20px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 30px 20px 0 20px;
  border-color: #f0f0f0 transparent transparent transparent;
}

#agreeBox:after {
  content: "";
  clear: both;
  display: block;
}

#agreeBox .col01 {
  float: left;
  font-size: 16px;
  line-height: 1.8;
  padding-top: 2px;
}

#agreeBox .col02 {
  float: right;
  padding-top: 2px;
}

#mailform #agree #consent {
  width: 390px;
  margin: 0;
}

#mailform #agree #consent span {
  padding-left: 0;
  background: #fff;
  text-align: center;
}

.checkBox label input[type="checkbox"] {
  display: none;
}

.checkBox label input[type="checkbox"] + .txt {
  display: block;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  background-color: #fff;
  box-shadow: 0 2px 0 0 #e0e0e0;
  color: #525252;
  cursor: pointer;
}

.checkBox label input[type="checkbox"] + .txt:before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin: 0 12px 4px 0;
  background: url(../img/ico_notchecked.png) center center no-repeat;
}

.checkBox label input[type="checkbox"]:checked + .txt {
  background-color: #cd006f !important;
  box-shadow: 0 2px 0 0 #a7005a;
  color: #fff;
}

.checkBox label input[type="checkbox"]:checked + .txt:before {
  background: url(../img/ico_checked.png) center center no-repeat;
}

#sendBox a img {
  cursor: pointer;
}

#sendBox #ssl table {
  margin: 0 auto;
}

#sendBox #ssl img {
  background-color: #f0f0f0;
}

/*------------------------------------------------------*/
#mailform #caution {
  margin: 50px 0 0;
}

/*------------------------------------------------------*/
#mailform.confirmSec #agree #send {
  overflow: hidden;
  margin: 0 0 50px;
}

#mailform.confirmSec #agree #send a {
  float: left;
  margin: 0;
}

#mailform.confirmSec #agree #send a + a {
  float: right;
}

.confirmSec .cmnFormSec {
  padding-top: 0;
  border: none;
}

.confirmBox {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  font-size: 20px;
  height: 60px;
  width: 100%;
  display: block;
  text-indent: 30px;
  line-height: 60px;
  color: #363636;
}

#courseSec {
	position: relative;
}

#courseSec .selectBox.courses{
	position: absolute;
	width: 380px;
	right: 0;
	top: 54px;
}

#courseSec [data-plan="premium"] {
  display: none;
}

#courseSec [data-plan="premium_plus"] {
  display: none;
}

#courseSec .radioBox.courses label:nth-child(3),
#courseSec .radioBox.courses label:nth-child(4) {
  margin-top: 15px;
}

.redataBox {
  margin-top: 20px;
}

.courseNoteBox + .siteExBox {
  margin-bottom: 20px;
}

.courseNoteList {
  margin-bottom: 20px;
}

.courseNoteList .item {
  margin-top: 1em;
  list-style-type: none;
  /* margin-left: 1.5em; */
  /* line-height: 0.8; */
}

/* .courseNoteList .item.is-active {
	list-style-type: none;
    margin-left: 0;
} */
.courseNoteList .item {
  font-size: 16px;
  padding-left: 0em;
  /* text-indent: -1em; */
}

/* ===============================================
同意事項確認
===============================================*/
.affirmation-introSec {
  margin-bottom: 30px;
}

.affirmation-introSec .txt {
  font-size: 16px;
}

.affirmationSec .secTit {
  font-size: 22px;
  font-weight: 900;
  color: #363636;
  line-height: 1;
  border-left: 4px solid #cd006f;
  margin-bottom: 20px;
}

.affirmationSec .secTit .tit {
  margin-left: 10px;
  display: inline-block;
}

.affirmationSec .txt {
  font-size: 16px;
}

.affirmationSec .formArea .SecIn {
  margin-bottom: 40px;
}

.affirmationSec .formArea .loadingImg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.affirmationSec .formArea .checkbox label {
  position: relative;
}

.affirmationSec .formArea .checkbox label input {
  display: none;
}

.affirmationSec .formArea .checkbox label input[disabled] + span {
  opacity: .5;
}

.affirmationSec .formArea .checkbox label input + span {
  position: relative;
  display: block;
  padding-left: 30px;
  margin: 14px 0;
  line-height: 28px;
}

.affirmationSec .formArea .checkbox label input + span:hover {
  cursor: pointer;
}

.affirmationSec .formArea .checkbox label input + span:before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #3f3a39;
  background: #fff;
  content: "";
}

.affirmationSec .formArea .checkbox label input:checked + span:after {
  position: absolute;
  top: 8px;
  left: 2px;
  width: 16px;
  height: 12px;
  background: url(../../../../common/img/check_ico01.png) no-repeat;
  background-size: 16px auto;
  content: "";
}

.affirmationSec .formArea .iframeWrap {
  margin-top: 20px;
}

#send > a.notactive {
  opacity: 0.5;
}

#send > a.notactive .opacityImg {
  opacity: 1 !important;
}

#mailform #formTable td input[name="company_name2_h"],
#mailform #formTable td input[name="company_name_kana2_h"] {
  border: none;
  background-color: #fff;
  color: #000;
}

/*.agreeArea*/
#mailform.affirmationSec .agreeArea .privacyFrame{
	margin: 10px 0 0;
}

/* .checkTxt チェックボックス+テキスト */
.checkTxt{
	display: flex;
	align-items: flex-start;
}
* + .checkTxt{margin-top: 17px;}
.checkTxt + .checkTxt{margin-top: 14px;}
.checkTxt input[type="checkbox"]{
	display: none;
}
.checkTxt label{
	cursor: pointer;
	position: relative;
	display: inline-block;
	padding-left: 30px;
	color: #333;
}

.checkTxt label:before {
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 14px;
	border: 2px solid #3f3a39;
	background: #fff;
	content: "";
}

.checkTxt input[type="checkbox"]:checked + label:after {
	position: absolute;
	top: 8px;
	left: 2px;
	width: 16px;
	height: 12px;
	background: url(../../../../common/img/check_ico01.png) no-repeat;
	background-size: 16px auto;
	content: "";
}