@charset "UTF-8";

/* gas_switch style
------------------------------------------------------------------------------------ */
/* header */
#page-header {
  max-width: initial;
  min-width: 100%;
}

/* page-contents */
#page-contents {
  width: 100%;
  min-width: 320px;
  padding: 0 0 50px;
}
#page-contents .sp_view {
  display: block;
}
#page-contents .pc_view {
  display: none;
}
#page-contents img {
  width: 100%;
}
#page-contents a[target="_blank"]::after {
  width: 3.6vw;
  height: 2.3vw;
}


/* switch Style
------------------------------------------------------------------------------------ */
/* switch_key ----------------------------- */
.switch_key ul {
  margin: 0 calc(22vw * 100 / 768);
  border-radius: 0 0 calc(20vw * 100 / 768) calc(20vw * 100 / 768);
}
.switch_key .key_note01 {
  margin: 0 calc(42vw * 100 / 768);
}
.switch_key .key_note02,
.switch_key .key_note03 {
  margin: 2% calc(58vw * 100 / 768) 0 calc(58vw * 100 / 768);
}
.switch_key .key_img02 + ul {
  margin-top: -1%;
}
.switch_key .key_note04 {
  margin-top: -1%;
}


/* switch_cv ----------------------------- */
.switch_cv,
.cv_area {
  padding: 5% 4%;
}
.cv_btn_orange, .cv_btn_green {
  width: calc(610vw / 768 * 100);
}
.cv_btn_orange {
  margin: 8% auto 6%;
  padding-top: 12%;
}
#page-contents .cv_btn_orange > img {
  width: calc(483vw / 768 * 100);
}
.cv_btn_green {
  margin-bottom: 10%;
}
.cv_btn_green + .cv_value {
  margin-top: 10%;
}
.switch_cv ul li {
  font-size: calc(24vw / 768 * 100);
}
.cv_append {
  margin: calc(20vw / 768 * 100) calc(25vw / 768 * 100);
  padding: calc(12vw / 768 * 100) calc(15vw / 768 * 100);
}

/* switch_cv cv_campaign */
.switch_cv .cv_campaign {
  width: 70%;
  margin: calc(35vw / 768 * 100) auto calc(50vw / 768 * 100);
}


/* switch_secure ----------------------------- */
/* secure_inner */
.secure_inner {
  margin-top: 5%;
  padding: calc(31vw / 768 * 100) 0 calc(15vw / 768 * 100);
}
.secure_inner dt {
  padding: 0 calc(62vw / 768 * 100) calc(20vw / 768 * 100);
  font-size: calc(42vw / 768 * 100);
}
.secure_inner dd {
  padding: 0 calc(62vw / 768 * 100) calc(26vw / 768 * 100);
  font-size: calc(27vw / 768 * 100);
}
.secure_inner ul { 
  margin-top: 3%;
}
.secure_inner ul li {
  font-size: calc(24vw / 768 * 100);
}


/* switch_step ----------------------------- */
.switch_step {
  padding: 0 0 calc(42vw * 100 / 768);
}
.switch_step dl dt,
.switch_step .step_caption,
.step_num1 .step_use ul strong,
.step_num2 .step_caption strong {
  font-size: calc(32vw / 768 * 100);
}
.switch_step dl dt strong,
.switch_step .step_caption strong {
  font-size: calc(41vw / 768 * 100);
}

/* step_point */
.step_point {
  margin: 0 calc(30vw * 100 / 768);
}
.step_point dt {
  padding: calc(20vw * 100 / 768) calc(5vw * 100 / 768);
  border-radius: calc(35vw * 100 / 768) calc(35vw * 100 / 768) 0 0;
}
.step_point .step_caption {
  padding: calc(25vw * 100 / 768) calc(5vw * 100 / 768) calc(20vw * 100 / 768);
}

/* step_inner */
.step_inner {
  margin: 0 calc(30vw * 100 / 768);
}
.step_inner .step_caption {
  margin: 0 0 calc(25vw * 100 / 768);
}
.step_inner .step_caption img {
  margin: 0 0 calc(10vw * 100 / 768);
}
.step_inner .step_txt {
  margin: 0 0 calc(30vw * 100 / 768) 0;
  font-size: calc(27vw / 768 * 100);
}
.step_inner .step_arr::after {
  margin: calc(18vw * 100 / 768) auto 0;
  width: calc(41vw * 100 / 768);
  height: calc(25vw * 100 / 768);
}

/* step_num1 */
.step_num1 {
  padding-bottom: calc(97vw * 100 / 768);
}
.step_num1 dl {
  margin: 0 calc(35vw * 100 / 768);
}
.step_num1 dl dt {
  border-radius: calc(35vw * 100 / 768) calc(35vw * 100 / 768) 0 0;
}
.step_num1 dl dd {
  border-radius: 0 0 calc(35vw * 100 / 768) calc(35vw * 100 / 768);
}

.step_num1 .step_info {
  margin-bottom: calc(30vw * 100 / 768);
}
.step_num1 .step_info dt {
  padding: calc(22vw * 100 / 768) calc(5vw * 100 / 768);
  font-size: calc(27vw / 768 * 100);
}
.step_num1 .step_info dd {
  padding: 0 calc(24vw * 100 / 768);
  }
.step_num1 .step_use dt {
  padding: calc(18vw * 100 / 768) calc(5vw * 100 / 768);
}
.step_num1 .step_use dd {
  padding: calc(20vw * 100 / 768) calc(31vw * 100 / 768) calc(25vw * 100 / 768);
}
.step_num1 .step_use ul li {
  margin: calc(22vw * 100 / 768) 0 0;
  font-size: calc(21vw / 768 * 100);
}
.step_num1 .step_use ul li:first-of-type {
  margin-top: 0;
}
.step_num1 .step_use ul strong {
  margin-bottom: calc(22vw * 100 / 768);
}

/* step_num2 */
.step_num2 {
  padding-bottom: calc(36vw * 100 / 768);
}

.step_num2 .cv_value {
  margin: 0 calc(25vw * 100 / 768);
}
.step_num2 .cv_append {
  margin: calc(20vw * 100 / 768) calc(30vw * 100 / 768);
}
.step_num2 .cv_note {
  margin: 0 calc(32vw * 100 / 768);
}


/* switch_value ----------------------------- */
/* value_family */
.value_family .value_note li {
  font-size: calc(24vw * 100 / 768) !important;
}
.value_family .value_inner {
  width: calc(600vw / 768 * 100);
}
.value_family .value_caption {
  font-size: calc(32vw / 768 * 100);
}
.value_family .value_append {
  padding: calc(15vw * 100 / 768) calc(24vw * 100 / 768);
  font-size: calc(22vw * 100 / 768);
}

/* value_extra */
.value_extra .value_note {
margin: 1.5em calc(35vw * 100 / 768) 2em;
}
.value_extra .value_note li {
  font-size: calc(24vw * 100 / 768) !important;
}
.value_extra .value_inner {
  padding: calc(50vw / 768 * 100) calc(35vw / 768 * 100) calc(40vw / 768 * 100);
  width: calc(690vw / 768 * 100);
  border-radius: calc(20vw * 100 / 768);
} 
.value_extra .value_txt {
  font-size: calc(27vw * 100 / 768);
}
.value_extra .value_modalBnr a {
  width: calc(629vw / 768 * 100);
  bottom: calc(65vw / 768 * 100);
}


/* switch_voice ----------------------------- */
.switch_voice {
  margin: calc(50vw * 100 / 768) 0 calc(30vw * 100 / 768);
}
.voice_case {
 margin: calc(30vw * 100 / 768) calc(26vw * 100 / 768) 0;
 width: auto;
}
.voice_case dl {
  padding: calc(40vw * 100 / 768) 0;
}
.voice_case dl dt {
  margin: 0 calc(10vw * 100 / 768) calc(30vw * 100 / 768);
  font-size: calc(40vw / 768 * 100);
}
.voice_case dl dt span {
  width: calc(380vw / 768 * 100);
  margin: calc(15vw * 100 / 768) auto 0;
  padding: calc(10vw * 100 / 768) calc(5vw * 100 / 768) calc(8vw * 100 / 768);
  font-size: calc(30vw / 768 * 100);
}
.voice_case dl dd {
  margin: 0 calc(40vw * 100 / 768);
  font-size: calc(30vw / 768 * 100);
}
.voice_case dl dd.voice_note {
  margin: 0 calc(40vw * 100 / 768);
  margin-top: calc(2% + 15px);
  padding: 0 calc(15vw * 100 / 768) calc(15vw * 100 / 768);
  font-size: calc(30vw / 768 * 100);
}
.voice_case dl dd.voice_note:before {
  margin: -14px auto 3%;
}


/* switch_faq ----------------------------- */
.switch_faq dl {
  font-size: calc(30vw / 768 * 100);
}
.switch_faq dl dt {
  background-size: calc(53vw / 768 * 100) auto;
}
.switch_faq dl dt::after {
  width: calc(37vw / 768 * 100);
  height: calc(21vw / 768 * 100);
}

/* faq_other */
.faq_other a {
  width: calc(450vw / 768 * 100);
  font-size: calc(22vw / 768 * 100);
  text-align: center;
}


/* switch_tel ----------------------------- */
.switch_tel {
  margin: 4% 4% 0;
  padding: 5% 4%;
  border-radius: calc(20vw * 100 / 768);
  font-size: calc(27vw / 768 * 100);
}
.switch_tel h2 {
  margin-bottom: calc(25vw * 100 / 768);
  font-size: calc(36vw / 768 * 100);
}
.tel_time {
  margin: calc(15vw * 100 / 768) auto calc(25vw * 100 / 768);
}


/* switch_modal ----------------------------- */
.modal_link_txt {
  font-size: max(calc(18vw / 768 * 100), 12px);
}

.modal_content {
  width: 74vw;
  max-width: 584px;
  overflow: scroll;
  padding: 5.3vw 5vw 3.7vw 5.7vw;
  max-height: 90vh;
}
.modal_text{
  font-size: 12px;
}
.switch_modal .modal-close {
  width: auto;
  margin-top: 3.4vw;
}
.switch_modal .modal_scroll {
  padding-right: 2vw;
}
.switch_modal .modal_scroll_inner {
  padding-right: 3.7vw;
  max-height: calc(100% - 7vh);
}

/* add */
.switch_key {
  position: relative;
  padding-bottom: 0;
}
.key_cta_button {
  position: absolute;
  top: 19.25%;
  left: 0;
  right: 0;
  margin: auto;
  width: 92vw !important;
  opacity: 1 !important;
}
.key_cta_fuki {
  position: absolute;
  top: 16.95%;
  left: 0;
  right: 0;
  margin: auto;
  width: 64.4vw !important;
}
.key_kv-3 {
  position: relative;
  display: block;
}
.key_kv-3 .key_kv-3-notice-1 {
  font-size: max(calc(18vw / 768* 100), 9px);
  border: solid #e8333a 2px;
}
.key_kv-3 .key_kv-3-notice-2 {
  font-size: max(calc(18vw / 768* 100), 9px);
}
.notice_area {
  position: relative;
  display: block;
}
.notice_01 {
  position: absolute;
  left: 10%;
  top: 44%;
}
.notice_02 {
  position: absolute;
  left: 10%;
  top: 91%;
}
.notice_03 {
  position: absolute;
  left: 10%;
  top: 86%;
}
.key_kv-2 {
  margin-bottom: -.5px;
}
.notice_01,
.notice_02,
.notice_03 {
  font-size: max(calc(18vw / 768* 100), 9px);
}
.switch_cv {
  background-color: #fffbd8 !important;
  background-image: none !important;
}
.cv_tit {
  margin-bottom: -.5px;
}
.cv_area {
  border: 0.8vw solid #ffdd33 !important;
  border-top: none !important;
}

/* アコーディオン
------------------------------------------------------------------------------------ */
.detail {
  width: 92%;
  margin: 5% auto;
}
.cnt_bg_b3 .detail {
  width: 100%;
}
.detail-btn {
  position: relative;
}
.arrow {
  width: 8%;
  position: absolute;
  top: 50%;
  right: 4%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  line-height: 1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.detail-btn.active .arrow {
  -webkit-transform: translate(0%, -50%) rotate(180deg);
          transform: translate(0%, -50%) rotate(180deg);
}
.detail-content {
  display: none;
  padding: 4% 4% 7% 4%;
  background-color: #eff5fe;
  border-radius: 5px;
  margin-top: 6%;
}
.detail-content .text.pl {
  padding-left: 1.2em;
}.scroll-img {
  overflow-x: scroll;
  padding-bottom: 3%;
  margin-bottom: 5%;
}
.detail-content .scroll-img::-webkit-scrollbar {
  height: 6px;
}
.detail-content .scroll-img::-webkit-scrollbar-track {
  background-color: #cbe8ff;
  border-radius: 6px;
}
.detail-content .scroll-img::-webkit-scrollbar-thumb {
  background-color: #0165b5;
  border-radius: 6px;
}
.detail-content .scroll-img .table {
  width: 330%;
  position: relative;
}
.table .btn {
  position: absolute;
  top: 28%;
  left: 57.6%;
}
.feature02-detail-btn {
  margin-top: 7%;
}
.detail_title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}
.more_detail .more_detail_tablewrap {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.more_detail .more_detail_table {
  width: 960px;
}
.more_detail_caption {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 5px;
}
.more_detail .more_detail_notes {
  margin-top: 10px;
}
.more_detail .more_detail_notes li {
  font-size: 12px;
  line-height: 1.6;
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.more_detail_table {
  width: 100%;
}
.more_detail_table .sup {
  display: inline-block;
  font-size: 10px;
  font-weight: normal;
  vertical-align: top;
}
.more_detail_table th {
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
  border: 1px solid #016c57;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
  width: 16%;
}
.more_detail_table td {
  background: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  border: 1px solid #016c57;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
}
.more_detail_table th:last-child,
.more_detail_table td:last-child {
  border-right: 1px solid #016c57;
}
.more_detail_table th.item {
  background: #016c57;
  color: #fff;
  border-bottom: 1px solid #fff;
}
.more_detail_table tr:last-child td.item {
  border-bottom: 1px solid #016c57;
}
.more_detail_table td.item {
  background: #016c57;
  color: #fff;
  border-bottom: 1px solid #fff;
}