@charset "utf-8";
/*.p-QiconLink 
-------------------------*/
.p-QiconLink {
  position: relative;
  color: inherit;
  text-decoration: none
}
.p-QiconLink::after {
  content: " ";
  background: url(/sim/dialpad/img/icon_help.png) 0 0/contain no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: -5px;
  margin-left: 5px
}

/*.modal
-----------------------*/
.modal,
.modal_fix{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: scroll;
  display: none;
  z-index: 100
}
.modal .modal_bg,
.modal_fix .modal_fix_bg{
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1
}
.modal_contents_wrapper {
  max-width: 890px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  height: 100%
}
@media only screen and (max-width: 599px) {
  .modal_contents_wrapper {
    width: 90%
  }
}
.modal_scrollBox {
  display: table;
  height: 100%;
  width: 100%
}
.modal_scrollBox_inner {
  display: table-cell;
  padding: 60px 0 60px;
  vertical-align: middle
}
.modal_contents {
  background-color: #fff;
  padding: 30px 15px;
  position: relative;
  border-radius: 10px
}
.modal_contents .modal_close {
  display: block;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 32px;
  line-height: 40px;
  position: absolute;
  right: 20px;
  top: -50px
}
.modal_contents .ttl {
  font-size: 20px;
  font-weight: normal;
  line-height: 140%;
  margin-bottom: 25px
}

.modal_fix .modal_contents .ttl {
  text-align: center;
  color: #c00;
}

@media only screen and (max-width: 599px) {
  .modal_contents .ttl {
    font-size: 19px;
    margin-bottom: 20px
  }
}
.modal_contents .body {
  margin-top: 25px;
  font-size: 15px
}
@media only screen and (max-width: 599px) {
  .modal_contents .body {
    margin-top: 20px;
    font-size: 14px
  }
}
.modal_contents .body img {
  max-width: 100%;
  width: auto
}
/*base
-----------------------*/
@media only screen and (max-width: 599px) {
  h2 > span {
    display: block;
  }
}
@media only screen and (max-width: 359px) {
  h2 {
    font-size: 18px;
  }
}
/*override
-----------------------*/
section.form > .item input[type=radio] + span {
  display: inline-block;
}
@media only screen and (max-width: 599px) {
  section.form > .item .price label {
    display: block;
  }
}
/* ----------------------------------------------------------------------
	
	 add css
	
---------------------------------------------------------------------- */
/* - index.html
---------------------------- */
input[type="text"]:disabled {
  background-color: rgba(190, 190, 190, 0.3);
}
h2 > span {
  display: block;
}
.kome {
  text-indent: -1em;
  padding-left: 1em;
  list-style: none;
}
section.form > .item input[type=radio] + span {
  display: inline-block;
}
@media only screen and (max-width: 599px) {
  section.form > .item .price label {
    display: block;
  }
}
.form.option select:disabled {
  background-color: #fafafa;
}
section.form .item.-entry_type {
  margin-left: 20px;
}
section.form .item.-entry_type label {
  border: 1px solid #d0dce4;
  padding: 10px 20px;
  border-radius: 6px;
  display: inline-block;
}
section.form .item.-entry_type label.show {
  display: inline-block;
}
section.form .item.-entry_type label.off {
  display: none;
}
section.form .item.-entry_type label:not(:last-child) {
  margin-right: 10px;
}
/*section.form .item.account {
    align-items: center;
}*/
/*section.form.service .item.account {
    align-items: baseline;
}*/
.sub_title {
  font-size: 16px;
  margin-bottom: 20px;
  margin-left: 20px;
}
.sub_title.no_margin {
  margin: 0;
}
.license_caption > .sub_title {
  margin-left: 0;
}
section.form > .item.-head {
  align-items: center;
  margin-bottom: 30px;
}
section.form .item.account .input.-select {
  padding-right: 0;
  margin-right: 30px;
  flex: auto;
}
section.form .item.account.-head .input.-select {
  flex: 0 1 350px;
}
section.form > .item .label.service_head {
  flex: 0 1 150px;
  padding-left: 0;
}
/*section.form .item.account .input.-select.-off {
    padding-right: 0;
    margin-right: 0;
    flex: 1 1 0%;
}*/
section.form select#service {
  width: 460px;
}
.license_caption {
  margin-left: 20px;
  font-size: 14px;
  margin-bottom: 40px;
}
.license_caption > p {
  margin: 0;
}
.license_caption > p + p {
  text-indent: -1em;
  padding-left: 1em;
  margin-top: 10px;
}
.note_attention, .note_service, .note_trial, .note_basic, .note_add, .note_plan, .note_option {
  margin-left: 20px;
  font-size: 14px;
  margin-top: -15px;
  margin-bottom: 25px;
  text-indent: -1em;
  padding-left: 1em;
  display: none;
}
.note_service {
  padding: 15px;
  border: 1px solid #d0dce4;
  text-indent: 0;
  padding-left: 15px;
  margin-top: 0;
  margin-bottom: 40px;
}
.note_basic, .note_plan {
  text-indent: 0;
  padding-left: 0;
}
.note_basic > p > span {
  text-indent: -1em;
  padding-left: 1em;
  display: block;
}
.note_basic > p.red {
  color: #ff3c28;
  text-indent: -1em;
  padding-left: 1em;
}
.note_plan > ul {
  padding: 0;
}
.note_plan > ul > li {
  display: table;
}
.note_plan > ul > li > span {
  display: table-cell;
}
.note_plan > ul > li > span.cap {
  width: 180px;
  font-weight: bold;
}
.note_attention {
  color: #ff3c28;
}
.note_attention.mt {
  margin-top: 15px;
}
.note_attention.-on, .note_service.-on, .note_trial.-on, .note_basic.-on, .note_add.-on, .note_plan.-on, .note_option.-on {
  display: block;
}
.note_trial span, .note_basic span, .note_add span, .note_option span {
  color: #ff3c28;
}
.note_basic span.normal {
  color: #333;
}
.title_plan {
  margin-top: 40px;
  display: none;
}
.title_plan.-on {
  display: block;
}
.note_service > span {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
  margin-top: 5px;
  color: #4579e8;
}
.note_service > span.cap {
  text-indent: 0;
  padding-left: 0;
  margin-top: 0;
  color: #333;
}
.note_service > span.no_block {
  display: inline;
  text-indent: 0;
  padding-left: 0;
  margin-top: 0;
}
.note_trial > span.block {
  display: block;
  margin: 20px 0;
  text-indent: 0;
}
section.service .note_attention {
  margin-left: 0;
}
section.form .item.account .-license {
  margin-right: 30px;
  flex: 0 1 200px;
  flex: 0 1 300px;
  padding-left: 0;
}
section.form .option_unit {
  display: none;
}
section.form .option_unit.current {
  display: block;
}
section.form .item.account .wrap {
  flex: auto;
}
section.form .item.account .wrap.-check_license > div {
  display: inline-block;
}
section.form .item.account .wrap.-check_license > div.-off {
  display: none;
}
section.form .item.account .wrap.-check_license > div > label {
  border: 1px solid #d0dce4;
  padding: 10px 20px;
  border-radius: 6px;
}
section.form .item.account .wrap.-check_license > div > label.no_touch {
  pointer-events: none;
}
/*section.form .item.account .wrap.-check_license > div + div {
  margin-left: 25px;
}*/
section.form .item.account .wrap.-check_license > div a {
  margin-left: 8px;
  margin-bottom: -5px;
}
section.form .item.account .wrap.-check_license > div a img {
  width: 20px;
  vertical-align: top;
}
section.form .item.account .wrap.-check_license .error_message {
  margin-top: 10px;
}
section.form .item.account .wrap .num_wrap {
  display: flex;
}
section.form.option .option_unit.-trial .item .label {
  display: block;
  line-height: 2;
  height: auto;
}
section.form .option_unit .item .input .error_message {
  color: #ff3c28;
  font-size: 13px;
  padding: 10px 30px 0 30px;
  width: 100%;
}
section.form .item .input.-auto {
  flex: auto;
}
section.form .item .input.-ex_acc.-off {
  /*opacity: 0;*/
  display: none;
}
section.form .item.account .input .inner {
  display: flex;
  align-items: center;
}
section.form .item.account .input .inner .label-sm {
  padding-right: 15px;
}
section.form .item.account .input .inner .input-sm input {
  padding: 15px;
  width: 134px;
}
section.form .item.account .input .inner .input-sm input.n_error {
  background-color: #ffe6e6;
}
section.form.service .num_error, section.form.air0AB_option .num_error {
  margin-left: 20px;
}
section.form.service .num_error, section.form.air0AB_option .num_error, section.form .item.account .opt_num_error, section.form .item.account .opt_dp_num_error {
  font-size: 13px;
  margin-top: 15px;
}
section.form.service .num_error > span, section.form.air0AB_option .num_error > span, section.form .item.account .opt_num_error > span, section.form .item.account .opt_dp_num_error > span {
  color: #ff3c28;
}
section.form.service .item.account {
  margin-left: 20px;
}
section.form.service .service_attention {
  margin-left: 20px;
  font-size: 13px;
}
section.form.service .service_attention span {
  color: #ff3c28;
  font-weight: bold;
}

/*2026.02　*/

section.form .item.-line_talk,
section.form .item.-line_talkai,
section.form .item.-line_sell,
section.form .item.-line_sellprem,
section.form .item.-line_support,
section.form .item.-line_supportprem{
  display: none;
}
section.form .item.-line_talk.on,
section.form .item.-line_talkai.on,
section.form .item.-line_sell.on,
section.form .item.-line_sellprem.on,
section.form .item.-line_support.on,
section.form .item.-line_supportprem.on{
  display: flex;

}
h3.option_service.off {
  display: none;
}
@media only screen and (min-width: 600px) {
  section.form > .item .input.-phone input {
    width: 130px
  }
}
@media only screen and (max-width: 599px) {
  section.form > .item .input.-phone input {
    width: 80px
  }
}
@media only screen and (max-width: 599px) {
  section.form .item.-entry_type {
    margin-left: 0px;
  }
  section.form .item.-entry_type label {
    display: block;
  }
  section.form .item.-entry_type label:not(:first-child) {
    margin-top: 10px;
  }
  section.form .item.-entry_type label:not(:last-child) {
    margin-right: 0px;
  }
  section.form .item.-entry_type label.show {
    display: block;
  }
  section.form .item.account.-head .input.-select {
    flex: auto;
  }
  .sub_title {
    font-size: 15px;
    margin-left: 0;
  }
  section.form select#service {
    width: 100%;
  }
  section.form .item.account .wrap.-check_license > div {
    display: flex;
    width: 100%;
    align-items: center;
  }
  section.form .item.account .wrap.-check_license > div > label {
    width: 100%;
  }
  section.form .item.account .wrap.-check_license > div + div {
    margin-left: 0;
    margin-top: 15px;
  }
  section.form.service .item.-line_talk.on, section.form.service .item.-line_sell.on, section.form.service .item.-line_support.on {
    display: block;
  }
  section.form > .item.-head {
    margin-bottom: 0;
  }
  section.form .item.account .-license {
    font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .note_attention, .note_service, .note_trial, .note_add, .note_plan, .note_option {
    margin-left: 0px;
    font-size: 14px;
    margin-top: -5px;
    margin-bottom: 10px;
  }
  .note_basic, .note_add, .note_plan {
    margin: 0;
    margin-bottom: 25px;
  }
  .note_plan > ul > li {
    display: block;
  }
  .note_plan > ul > li + li {
    margin-top: 10px;
  }
  .note_plan > ul > li > span {
    display: block;
  }
  .note_plan > ul > li > span.cap {
    width: 100%;
    ;
  }
  .note_service {
    margin: 0;
    margin-top: 20px;
    margin-bottom: 25px;
  }
  .license_caption {
    margin-left: 0;
    margin-bottom: 25px;
  }
  section.form .option_unit .item .label {
    height: auto;
    line-height: initial;
    padding-left: 0px;
  }
  section.form .option_unit .item {
    display: block;
    margin-bottom: 15px;
  }
  section.form .item.account .input {
    margin-bottom: 25px;
  }
  section.form .item.account .input.-select {
    margin-right: 0;
  }
  section.form .item.account .wrap .num_wrap {
    display: block;
  }
  section.form .item.account .input .inner .label-sm {
    height: auto;
    line-height: initial;
    padding-left: 0px;
    margin-bottom: 6px;
    font-size: 14px;
  }
  section.form .item.account .input .inner {
    display: block;
  }
  section.form .item.account .input .inner .label-sm {
    padding-right: 0;
  }
  section.form .item.account .input .inner .input-sm input {
    padding: 15px;
    width: 100%;
  }
  section.form .item.account + .item.account {
    margin-top: 30px;
  }
  section.form.option .item .label {
    font-size: 15px;
    margin-bottom: 20px;
  }
  section.form.service .item.account {
    margin-left: 0;
  }
}
/* -------------------------------------
	2022.08 Air0AB追加
---------------------------------------- */
#air0AB_block {
  display: none;
}
#air0AB_block.on {
  display: block;
}
.air_area {
  display: none;
}
.air_area.on {
  display: block;
}
section.form > .item.air_area {
  display: none;
}
section.form > .item.air_area.on {
  display: flex;
}
.air_caption {
  margin: 0 20px;
  margin-top: 35px;
  font-size: 14px;
}
.air_caption h4 {
  margin: 0;
}
.air_caption h4.required:before {
  content: "*";
  color: #f74141;
  margin-left: 0.1em;
  padding-right: 3px;
}
.air0AB_option .caption {
  margin: 0 20px;
}
.air0AB_option .note_service > span {
  margin-top: 0;
}
.air0AB_option .note_service > span.cap {
  display: none;
}
.airopt_unit {
  padding-top: 10px;
  /*border-top: 1px solid #CCC;*/
}
.airopt_unit > .op_num {
  background-color: #666;
  color: #FFF;
  font-weight: bold;
  margin-bottom: 25px;
  padding: 8px 12px;
}
.airopt_unit:not(.copy) > .op_num {
  margin-bottom: 35px;
}
.note_service + .airopt_unit {
  margin-top: 40px;
}
.airopt_unit + .airopt_unit {
  margin-top: 30px;
}
.form.air0AB_option .airopt_plan {
  margin-left: 20px;
}
section.form .item.addoffice {
  margin-bottom: 40px;
}
section.form .airopt_option {
  margin-top: 40px;
}
section.form .airopt_option .item .label {}
.airopt_unit .close_unit {
  text-align: right;
}
.airopt_close {
  margin-bottom: 30px;
  margin-right: 10px;
  display: inline-block;
}
.airopt_unit.base .airopt_close {
  display: none;
}
.airopt_close > div {
  display: inline-block;
  color: #FFF;
  background-color: #888;
  line-height: 1.2;
  padding: 7px 15px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  opacity: 1;
}
.airopt_close > div:hover {
  cursor: pointer;
  opacity: 0.8;
}
.airopt_close > div > span {
  margin-right: 0.4em;
}
.cloneBtn {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  font-weight: bold;
  background-color: #7098b8;
  color: #FFF;
  padding: 15px;
  border-radius: 6px;
  opacity: 1;
}
.cloneBtn:hover {
  cursor: pointer;
  opacity: 0.8;
}
.input.office_newcheck .error_message, .input.office_excheck .error_message {
  margin: 0 10px 30px 20px;
  color: #ff3c28;
  font-size: 14px;
  padding-left: 1em;
  text-indent: -1em;
}
@media only screen and (max-width: 599px) {
  .air_caption {
    margin-left: 0;
    margin-right: 0;
  }
  section.form > .item.air_area.on {
    display: block;
  }
  .note_service + .airopt_unit {
    margin-top: 20px;
  }
  section.form.air0AB_option .item.-line_talk.on, section.form.air0AB_option .item.-line_sell.on, section.form.air0AB_option .item.-line_support.on {
    display: block;
  }
  section.form .item.addoffice {
    margin-bottom: 35px;
  }
  .air0AB_option .caption {
    margin: 0;
  }
  .form.air0AB_option .airopt_plan {
    margin-left: 0;
  }
  .airopt_close {
    margin-bottom: 15px;
  }
}
#unit3 {
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #FFF;
  padding: 5px 10px;
}
#kensyo {
  position: fixed;
  top: 50px;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #FFF;
  padding: 5px 10px;
}
#kensyo > p, #kensyo_uni3 > p {
  margin: 0;
  margin-bottom: 10px;
  text-decoration: underline;
}
#kensyo .content, #kensyo_uni3 .content {
  display: flex;
  width: auto;
}
.center {
  margin: 0 20px;
}
#kensyo_opt {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #FFF;
  padding: 5px 10px;
}
#kensyo_opt .content {
  display: flex;
  width: auto
}
.hide_num {
  display: none;
}
#kensyo_alltotal {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(138, 33, 33, 0.7);
  color: #FFF;
  padding: 5px 10px;
}
#kensyo_uni3 {
  position: fixed;
  top: 50px;
  left: 0;
  background-color: rgba(138, 33, 33, 0.7);
  color: #FFF;
  padding: 5px 10px;
}

#all {
  position: fixed;
  background-color: rgba(0,0,0,0.7);
  color: #FFF;
  top: 0;
  left: 0;
  width: auto;
  padding: 10px;
  font-size: 14px;
  z-index: 100;
}

#all .num{
  font-size: 16px;
  font-weight: bold;
}

#li_all {
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(0,0,0,0.7);
  color: #FFF;
  width: auto;
  padding: 10px;
  font-size: 14px;
  z-index: 100;
}

#opt_all {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  color: #FFF;
  width: auto;
  padding: 10px;
  font-size: 14px;
}

/* -------------------------------------
	2022.11 代理店ロゴ追加
---------------------------------------- */

.-agency header {
  margin-bottom: 20px;
}

#agency_logo {
  max-width: 1000px;
  margin: 0 auto;
  display: none;
}

.-agency #agency_logo {
  display: block;
}

#agency_logo .unit {
  display: inline-block;
}

#agency_logo .unit .wrap {
  display: flex;
  align-items: center;
}

#agency_logo .unit .txt {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.6;
}

#agency_logo .unit .wrap .logo_area {
  margin-left: 10px;
}

#agency_logo .unit .wrap .logo_area img{
  vertical-align: top;
  max-height: 34px;
}

.-agency h1 {
  margin-top: 0;
}

@media only screen and (max-width: 599px) {

#agency_logo .unit .wrap {
  margin-left: 15px;
}

#agency_logo .unit .txt {
  font-size: 14px;
}

#agency_logo .unit .wrap .logo_area img {
    max-height: 28px;
}

.-agency h1 {
  margin-top: 30px;
}

}

/*2024.07 追加*/

section.form .item .label.lineclear {
  line-height: 2;
}

/*2026.02 追加*/

/* 3列で並べる（崩れ防止） */
.wrap.-check_license{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;              /* 行/列の間隔 */
  align-items: center;

  /* ① 左余白を消す */
  padding-left: 0;
  margin-left: 0;
}

/* 各ボックスは「ラベル(箱)」の中に ? を入れる前提 */
.wrap.-check_license > div{
  position: relative;          /* ? の absolute 基準 */
  min-width: 0;
}

/* ラベルを箱として使う（?分の右余白を確保） */
.wrap.-check_license > div label{
  width: 85%;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;

  padding-right: 42px;         /* ← ? のスペース */
}

/* 長い文字ははみ出さないように */
.wrap.-check_license > div label .name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ② ?アイコンを「チェックボックスの横（同じ行）」に固定（右端） */
.wrap.-check_license > div a.js-modal{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  margin: 0 !important;

  display: flex !important;
  align-items: center;
  line-height: 0;
  flex: 0 0 auto;
}



/* 画面が狭い時は2列→1列に */
@media (max-width: 900px){
  .wrap.-check_license{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .wrap.-check_license{
    grid-template-columns: 1fr;
  }
}

.l_num_input.n_error {
  background: #ffe6e6 !important;
}
