@charset "utf-8";
/* CSS Document */


html, body {
  font-family: "Noto Sans CJK JP", Arial, "游ゴシック体", YuGothic, "Yu Gothic Medium", "メイリオ", Meiryo, Helvetica, 
  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0 !important;
  padding: 0 !important;
}

/* 削除 */
.pageHed .lg_sony > ul,
.pageHed .gNav,
.recommendScene,
#entryCorner,
#official_sns,
.following,
.footer__main__in .nuroLogo {
  display: none;
}

/* クッキーポリシーのみ */
.footer__main__lnk li:not(.cookiepolicy) {
  display: none;
}


/* ===========================================================
 topKv
=========================================================== */

.topKv {
  position: relative;
}

.topKv .khh {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.7vw;
  width: 68vw;
  text-align: center;
  line-height: 4vw;
}

.topKv .khh:before {
  content: "※ ";
}

.topKv .khh a {
  display: inline;
  color: #618fda;
  text-decoration: underline;
}

.topKv .khh a:hover {
  text-decoration: none;
}


.topKv .entryBtn {
  background: #27b0d7;
  padding: 4vw 0;
  text-align: center;
}

.topKv .entryBtn a {
  background: #fff;
  color: #27b0d7;
  font-size: 3.6vw;
  font-weight: 700;
  display: inline-block;
  padding: 2vw 8vw;
  border-radius: 10vw;
  border: solid 2px transparent;
}


/* 固定 */
.topKv .entryBtn.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 2vw 0;
  animation: fixedshow .3s ease;
}

.topKv .entryBtn.fixed a {
  font-size: 3.2vw;
}


@keyframes fixedshow {
  0% {
    transform: translateY(100%)
  }
   100% {
    transform: translateX(0)
  }
}


/* 期間限定 */
.topKv .gentei {
  position: absolute;
  bottom: 22vw;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  border: solid 2px red;
  padding: 3vw 5vw;
  width: 90vw;
  font-size: 3vw;
  line-height: 4.2vw;
  text-align: center;
  background: #fff;
}

/* ===========================================================
 whats
=========================================================== */


#whats {
  padding: 18vw 0 0;
}

#whats h2 {
  font-size: 6vw;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10vw;
  position: relative;
}

#whats h2:after {
  content: "";
  width: 1px;
  height: 23vw;
  background: #3a3e39;
  position: absolute;
  top: 3vw;
  transform: rotate(40deg);
}


#whats h2 span:nth-of-type(1) {
  font-size: 9vw;
  font-family: Century Gothic, Arial;
  letter-spacing: 0.7vw
}

#whats h2 span:nth-of-type(2) {
  font-size: 5vw;
}

#whats .area figure {
  width: 90vw;
  margin: 0 auto 7vw;
}

#whats .area .rgt {
  text-align: center;
}

#whats .area .rgt .lead {
  font-size: 5.5vw;
  font-weight: 700;
  letter-spacing: 0.2vw;

}

#whats .area .rgt .lead span {
  font-family: Arial;
  font-size: 8vw;
  display: inline-block;
  margin: 0 0.5vw
}

#whats .area .rgt .txt {
  margin: 6vw 0;
  font-size: 3.8vw;
  line-height: 6vw;
  padding: 0 6vw;
}

#whats .area .rgt .caution {
  width: 80vw;
  margin: 0 auto;
  text-align: left;
}

#whats .area .rgt .caution li {
  font-size: 2.7vw;
  margin: 0 0 3vw;
  line-height: 3.5vw;
  position: relative;
  padding: 0 0 0 4vw;
}

#whats .area .rgt .caution li:before {
  content: "※";
  position: absolute;
  left: 0;
}


/* ===========================================================
 rental
=========================================================== */

#rental {
  padding: 18vw 0 0;
}

#rental h2 {
  font-size: 7vw;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10vw;
  position: relative;
}

#rental h2:after {
  content: "";
  width: 1px;
  height: 27vw;
  background: #3a3e39;
  position: absolute;
  top: -7vw;
  left: 11.5vw;
}



#rental .wrapper {
  width: 90vw;
  margin: 0 auto;
  background: #e8eff7;
  border-radius: 0 10vw 0 10vw;
  padding: 6vw 0;
}

#rental .wrapper .area figure {
  width: 30vw;
  margin: 0 auto 1vw;
}

#rental .wrapper .area .lead {
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 5.5vw;
  margin: 0 0 3vw;
  letter-spacing: 0.2vw;
  text-align: center;
}

#rental .wrapper .area .lead span {
  display: block;
  font-size: 3.4vw;
  font-weight: 500;
}

#rental .wrapper .area .modal_open {
  font-size: 2.7vw;
  font-weight: 700;
  padding: 2vw 0;
  border: solid 1px #3a3e39;
  width: 67vw;
  margin: 0 auto 3vw;
  text-align: center;
}


#rental .wrapper .caution {
  font-size: 2.7vw;
  text-align: center;
  line-height: 3.5vw;
  width: 65vw;
  margin: 0 auto 5vw;
}

#rental .wrapper .support {
  background: #27b0d7;
  color: #fff;
  text-align: center;
  padding: 3vw 6vw;
  font-size: 4vw;
  font-weight: 700;
  border-radius: 0 0 0 10vw;
  line-height: 6vw;
}

#rental .wrapper .support span {
  display: block;
  font-size: 2.7vw;
  font-weight: 500;
  margin: 2vw 0 0;
  padding: 0 12vw;
  line-height: 3.8vw;
}


/* --------------------------------------
 モーダル
-------------------------------------- */

.modal_contents_in .pd_content {
    margin: 0 0 14vw
}

.modal_contents_in .pd_content > .ttl {
    font-size: 4vw;
    font-weight: 700;
    background: #f4f4f4;
    padding: 4vw 5vw;
    margin: 0 0 6vw;
}

.modal_contents_in .pd_content .movielink {
    font-size: 3vw;
    padding: 0 0 0 2vw;
}

.modal_contents_in .pd_content .movielink a {
    display: inline;
    color: #618fda;
    text-decoration: underline;
}


.modal_contents_in .details {
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.modal_contents_in .details table {
    width: 100%;
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
}

.modal_contents_in .details table th,
.modal_contents_in .details table td {
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
}

.modal_contents_in .details table th {
    background: #e8eff7;
    width: 42%;
    padding: 4vw;
    vertical-align: middle;
    font-size: 2.7vw;
    line-height: 3.5vw;
}

.modal_contents_in .details table td {
    font-size: 2.7vw;
    vertical-align: middle;
    padding: 4vw;
    line-height: 3.5vw;
}

/* ===========================================================
 payment
=========================================================== */


#payment {
  padding: 18vw 0 0;
  width: 90vw;
  margin: 0 auto;
}

#payment h2 {
  font-size: 7vw;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10vw;
  position: relative;
}

#payment .table {
  position: relative;
}

#payment .table:after {
  content: "";
  width: 1px;
  height: 13vw;
  background: #3a3e39;
  position: absolute;
  top: -13vw;
  right: 0;
}

#payment .table:before {
  content: "";
  width: 12vw;
  height: 1px;
  background: #3a3e39;
  position: absolute;
  top: -13vw;
  right: 0;
}




#payment .table table {
  width: 100%;
  border-top: solid 1px #3a3e39;
  border-left: solid 1px #3a3e39;
  margin: 0 0 4vw;
}

#payment .table table th {
  background: #e4e4e4;
}

#payment .table table th,
#payment .table table td {
  border-right: solid 1px #3a3e39;
  border-bottom: solid 1px #3a3e39;
  padding: 6vw 2vw;
  font-size: 3vw;
  text-align: center;
  vertical-align: middle;
  line-height: 4vw
}

#payment .table table th sup,
#payment .table table td sup {
  font-size: 2.7vw;
}

#payment .table table th span,
#payment .table table td span {
  font-size: 2.7vw;
  margin: 0 0 0 0.3vw;
}

#payment .modal_open {
  font-size: 3.6vw;
  padding: 2vw 7vw;
  display: inline-block;
  border: solid 1px #3a3e39;
  margin: 0 0 7vw;
  transition: all .2s ease;
}

#payment .modal_open:hover {
  background: #3a3e39;
  color: #fff;
}

#payment .modal_open:after {
  content: "+";
  font-size: 5vw;
  display: inline-block;
  vertical-align: -0.3vw;
  margin: 0 0 0 2vw
}

#payment .caution {
  padding: 1vw 0 0 5vw;
  border-left: solid 1px #3a3e39;
}

#payment .caution li {
  font-size: 2.7vw;
  margin: 0 0 3vw;
  line-height: 3.5vw;
  position: relative;
  padding: 0 0 0 3.5vw;
}

#payment .caution li:before {
  content: "・";
  position: absolute;
  left: 0;
}

#payment .caution li:nth-of-type(1) {
  padding: 0 0 0 8vw;
}

#payment .caution li:nth-of-type(1):before {
  content: "※1：";
}



/* --------------------------------------
 モーダル
-------------------------------------- */

.modal_wrapper_in {
  padding: 2vw;
}

.modal_wrapper_in {
  padding: 4vw 4vw 12vw;
  margin: 0 auto;
  letter-spacing: 0;
}

.modal_wrapper_in .ttl {
  font-size: 7vw;
  text-align: center;
  margin: 10vw 0;
}

.modal_wrapper_in .insede_fee {
  margin: 0 0 6vw;
}

.modal_wrapper_in .insede_fee .subttl {
  font-size: 4.5vw;
  font-weight: 700;
  margin: 0 0 3vw;
  padding: 0 0 0 1vw;
}

.modal_wrapper_in .insede_fee table {
  width: 100%;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  margin: 3vw 0 3vw;
}

.modal_wrapper_in .insede_fee table th,
.modal_wrapper_in .insede_fee table td {
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  padding: 3vw;
  font-size: 3vw;
  letter-spacing: 0;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 4vw;
  min-height: 10em;
  text-align: center;
}

.modal_wrapper_in .insede_fee table td span {
  font-size: 2.7vw;
  display: block;
}

.modal_wrapper_in .insede_fee table td:first-of-type {
  width: 15%;
}

.modal_wrapper_in .insede_fee table th {
  background: #e4e4e4;
}

.modal_wrapper_in .insede_fee table th:nth-of-type(n+2) {
  font-size: 2.7vw;
  line-height: 3vw;
  white-space: nowrap;
}


/* 縮小 */
.modal_wrapper_in .insede_fee table td .small {
  font-size: 2.7vw;
  display: block;
  margin: 1vw 0 0;
}

/* 縦書き */
.modal_wrapper_in .insede_fee table .vtical {
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}

/* 縦横中 */
.modal_wrapper_in .insede_fee table .combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}


.modal_wrapper_in .insede_fee table td.bdnone {
  border-left: none;
}

.modal_wrapper_in .insede_fee table sup {
  font-size: 2.7vw;
  font-weight: 700;
  position: relative;
  margin: 1vw 0 0;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

.modal_wrapper_in .insede_fee .caution {
  font-size: 2.7vw;
  line-height: 3vw;
}

.modal_wrapper_in .insede_fee .caution li {
  margin: 0 0 2vw;
}



/* ===========================================================
 flow
=========================================================== */


#flow {
  margin: 18vw 0 0;
  padding: 18vw 0;
  background: #f4f4f4
}

#flow h2 {
  font-size: 7vw;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10vw;
  position: relative;
}

#flow h2 span {
  display: block;
  font-size: 3vw;
  font-weight: 500;
  margin: 4vw 0 0;
  letter-spacing: 0.2vw;
}

#flow ul {
  width: 80vw;
  margin: 0 auto 4vw;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

#flow ul li {
  background: #fff;
  border-radius: 100vw;
  border: solid 1px #3a3e39;
  text-align: center;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 38vw;
  height: 38vw;
  position: relative;
  margin: 0 0 4vw
}

#flow ul li:after {
  content: "";
  width: 4.5vw;
  height: 1px;
  background: #3a3e39;
  position: absolute;
  top: 50%;
  right: -4.8vw;
}

#flow ul li:nth-of-type(2):after {
  content: "";
  width: 21.5vw;
  height: 1px;
  background: #3a3e39;
  position: absolute;
  top: 38.5vw;
  right: 30vw;
  transform: rotate(-45deg);
}

#flow ul li:last-of-type:after {
  display: none;
}

#flow ul li .number {
  font-size: 6vw;
  font-family: Century Gothic, Arial;
  font-weight: 700;
}

#flow ul li .lead {
  font-size: 3.4vw;
  font-weight: 700;
  line-height: 4.5vw;
  height: 12vw;
  display: flex;
  align-items: center;
}

#flow ul li figure {
  height: 7vw;
}


#flow ul li:nth-of-type(3) figure {
  height: 7.5vw;
  position: relative;
  right: -0.4vw;
}

#flow ul li:last-of-type figure {
  height: 8vw;
  position: relative;
  top: -1.5vw;
  right: -0.8vw;
}

#flow ul li figure img {
  width: auto;
  height: 100%;


}

#flow .return {
  text-align: center;
  font-weight: 700;
  position: relative;
}


#flow .return .ttl {
  font-size: 5vw;
  margin: 0 0 3vw;
}

#flow .return .lead {
  margin: 0 0 7vw;
  font-size: 3.2vw;
}

#flow .return .kaiyaku {
  background: #27b0d7;
  width: 80vw;
  color: #fff;
  margin: 0 auto;
  padding: 4vw 0;
  font-size: 4vw;
  border-radius: 1vw;
}

#flow .return .kaiyaku:after {
  content: "";
  width: 1.5vw;
  height: 1.5vw;
  border-top: solid 1vw #fff;
  border-right: solid 1vw #fff;
  display: inline-block;
  transform: rotate(45deg);
  vertical-align: 0.2vw;
  margin: 0 0 0 2vw;
}




/* ===========================================================
 entry
=========================================================== */

#entry {
  padding: 13vw 0 0;
  background: #4f556e;
}

#entry > h2 {
  font-size: 7vw;
  font-weight: 700;
  text-align: center;
  margin: 0 0 4vw;
  position: relative;
  color: #fff;
}

#entry > h2:after {
  content: "";
  width: 1px;
  height: 8vw;
  background: #fff;
  position: absolute;
  top: 300%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}


#entry > .lead {
  font-size: 2.7vw;
  text-align: center;
  padding: 0 0 13vw;
  color: #fff;
}

#entry .caution {
  width: 75vw;
  margin: 0 auto;
  font-size: 3vw;
  line-height: 4.5vw;
}

/* ボタン */

.entryForm .apply button {
  margin: 0 auto 6vw
}

.entryForm .apply button:not([disabled]) span b {
  color: #ff3400;
}


/* 代理店規約
--------------------------------*/


#entry .d_kiyaku {
  background: #fff;
  width: 85vw;
  border-radius: 3vw;
  margin: 6vw auto;
  padding: 8vw;
  font-size: 3vw;
  line-height: 5vw;
  text-align: left;
  color: #3e3a39;
}

#entry .d_kiyaku a {
  color: #618fda;
  text-decoration: underline;
}

#entry .doui {
  font-size: 3.6vw;
  line-height: 5.5vw
}



/* ===========================================================
 qa
=========================================================== */

#qa {
  margin: 15vw 0 0;
}

#qa h2 {
  font-size: 7vw;
  font-weight: 700;
  text-align: center;
  margin: 0 0 15vw;
}

#qa ul li {
  border-top: dotted 1px #ccc;
  font-size: 4vw;
}

#qa ul li:last-of-type {
  border-bottom: dotted 1px #ccc;
}

#qa ul li input {
  display: none;
}

#qa ul li .acd-label {
  font-weight: 700;
  display: block;
  position: relative;
  line-height: 5.5vw;
  padding: 6vw 15vw;
}

#qa ul li .acd-label:after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 5.5vw;
  transform: translateY(-50%);
  font-size: 4.5vw;
}

#qa ul li input:checked + .acd-label:after {
  content: "－";
  right: 5vw;
  top: 52%;
}


#qa ul li .acd-label:before {
  content: "";
  background: url("/lp/trial_remoteconnect/img/ico-q.svg") no-repeat;
  background-size: contain;
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 50%;
  left: 4vw;
  transform: translateY(-50%);
}

#qa ul li .acd-content {
  font-size: 3.6vw;
  line-height: 5.4vw;
  position: relative;
  padding: 0 15vw;
  margin: 0 0 6vw;
  display: none;
}

#qa ul li .acd-content a {
  display: inline;
  color: #618fda;
  text-decoration: underline;
}

#qa ul li .acd-content a:hover {
  text-decoration: none;
}

#qa ul li .acd-content:before {
  content: "";
  background: url("/lp/trial_remoteconnect/img/ico-a.svg") no-repeat;
  background-size: contain;
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 0;
  left: 4vw;
}