@charset "UTF-8";
@import url(/i-filter-consumer/ver10/shared/css/reset.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

/*---------------------------
  i-filter-consumer 購入システム
  2023
---------------------------*/

/*---------------------------
  0.common
  1.header
  2.main
    2.1 レイアウト・ボックス
    2.2 見出し
    2.3 段落・テキスト装飾
    2.4 入力フォーム・ボタン
    2.6 Table・その他
  3.footer
  4.個別ページ
---------------------------*/

/*---------------------------
  0.common
---------------------------*/
:root {
  --black: #212529;
  --red: #ff1e3c;
  --orange: #ffac00;
  --orange-rgb: 255, 172, 0;
  --blue: #0046a9;
  --green: #07825D;
  --royalblue: #3e72da;
  --royalblue-rgb: 62, 114, 218;
  --cyan: #0084ff;
  --limeGreen: #1EB45F;
  --oceanGreen: #399B7D;
  --oceanGreen-rgb: 57, 155, 125;
  --mintIce: #E6F3EF;
  --lime: #6ec832;
  --gray: #d3d8e3;
  --gray-rgb: 226, 234, 249;
  --max-width: 990px;
  --rem: 10px; /* = 1rem */
  --base-font: 1.5rem; /* 15px */
  --font-family-sans-serif: "Noto Sans JP", "メイリオ", Meiryo, "LucidaGrande",
    Verdana, "ヒラギノ角ゴProW3", "HiraginoKakuGothicPro", Osaka,
    "ＭＳＰゴシック", sans-serif;
  --color-href: var(--cyan);
  --border-radius: 4px;
  --line-height-default: 1.6;
  --line-height-narrow: 1.25;
  --input-form-margin: 5px 0;
  --input-form-padding: 0.5rem 1rem;
  --input-form-height: 40px;
  --input-form-border: 1px solid var(--gray);
  --input-form-border-radius: var(--border-radius);
  --input-form-font-size: 1.3rem;
  --table-default-th-background-color: var(--royalblue);
  --table-default-th-padding: 6px;
  --table-default-th-border: 1px solid #fff;
  --table-default-th-font-size: 1.2rem;
  --table-default-td-background-color: #fff;
  --table-default-td-padding: 6px;
  --table-default-td-border: 1px solid rgba(var(--oceanGreen-rgb), 0.4);
  --table-default-td-font-size: 1.2rem;
  --table-paynotice-th-border:1px solid  rgba(var(--oceanGreen-rgb), 0.4);
  --table-paynotice-td-border:1px solid  rgba(var(--oceanGreen-rgb), 0.4);
  --table-paynotice-tr-border:1px solid  rgba(var(--oceanGreen-rgb), 0.4);
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html {
  font-size: var(--rem);
  overflow-x: hidden;
}
body {
  font-family: var(--font-family-sans-serif);
  font-size: var(--base-font);
}
a {/*aタグ。ハイパーリンクにはアンダーラインを付ける*/
  text-decoration: underline;
}
.content-wrapper {
  position: relative;
  max-width: var(--max-width);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 20px calc(77px);
}
.color-blue {
  color: var(--blue);
}
.color-red {
  color: var(--red);
}
.color-green {
  color: var(--green) !important;
}
.color-royalblue {
  color: var(--royalblue);
}
.color-black {
  color: var(--black) !important;
}
.color-oceangreen{
   color:var(--oceanGreen);
}
.break-all {
  word-break: break-all;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dt,
dd {
  margin: 0 5px 10px;
  line-height: var(--line-height-default);
}
a,
a:visited {
  color: var(--color-href);
}
a:hover {
  color: var(--color-red);
}
strong,
.weight-bold {
  font-weight: bold;
}
.weight-normal {
  font-weight: normal;
}
.weight-normal-imp {
  font-weight: normal !important;
}
.font-error {
  font-size: 1.7rem;
}
.list-note {
  font-size: 1.3rem;
}
.list-note li {
  text-indent: -1em;
  padding-left: 1em;
}
.center {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
}
.centerScreen{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding-bottom: 80px;/*フッター込みでの中央配置*/
}
/*.centerScreenResetForMobile{上と同じですが、画面サイズを変更したときの挙動が異なります。
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding-bottom: 80px;フッター込みでの中央配置
}*/
.centerScreenResetForMobile{
  position: static; /* 位置指定をリセット */
  transform: none; /* 変形をリセット */
  left: auto;
  top: auto;
  width: auto; /* 幅をデフォルトに戻す */
  padding-bottom: 0; /* パディングをリセット */
}
.bottomScreen{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  padding-bottom: 110px;/*フッターとかぶらないようにする*/
}
.left {
  text-align: left !important;
}
.dashed-line-large {/*破線の間隔が広いバージョン@extend .dashed-line-large;で使う*/
  border-bottom: none;
  background-image: repeating-linear-gradient(
    to right,
    rgba(var(--oceanGreen-rgb), 1) 0,    /* Changed opacity from 0.4 to 1 for vivid color */
    rgba(var(--oceanGreen-rgb), 1) 10px,  /* Small dash */
    transparent 10px,
    transparent 15px,                      /* Small gap */
    rgba(var(--oceanGreen-rgb), 1) 15px,  /* Start large dash */
    rgba(var(--oceanGreen-rgb), 1) 35px,  /* Large dash */
    transparent 35px,
    transparent 40px                       /* Reduced from 45px to 40px to make pattern tighter */
  );
  background-position: bottom;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

.cation{
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
}
.radio_center {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
}
.radio_license_txt {
  margin-left: 28px;
  word-break: keep-all;
}
.lMarginBottom{
  margin-bottom: 100px;
}
.MMarginBottom{
  margin-bottom: 20px;
}
.pMarginBottom{
  margin-bottom: 25px;
}
.sMarginBottom{
  margin-bottom: 10px;
}
.radio_license {
  padding: 5px 70px 15px;
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center; 
}
.align-items-center {
  align-items: center;
}
.license_radio {
  width: 2rem;
  height: 2rem;
  margin-top: -.25rem;
  margin-left: 0.35rem;
  margin-right: 700px;
}
.ContractAmount {
  float: right;
  gap: 10px;
  flex-wrap: wrap;
  text-align: left;
  white-space: nowrap;
  display: inline-flex; 
}
.ContractPlan{
  display: flex;
  align-items: center;
  text-align: left;
  display: inline-block;
  margin-left: 24px;
}
.ContractPlanOnlyMonthly{
  display: flex;
  align-items: center;
  text-align: left;
  display: inline-block;
  margin-left: 24px;
}
.MonthlyPlan{
  margin-right: 103px;
}
.ContractAmountLeft {
  margin-left: 20px;
}
.ContractAmountRight {
  padding-left: 70px;
}
.ContractAmountRightM {
  padding-left: 99px;
}
.ContractAmount br,
.ContractAmount br + br {
    display: none;
    content: "";
}
.PaymentMethod{
  margin-top: 70px;
}
.d-flex {
  display: flex;
}
.col3 {
  width: 33%;
}
.col3 {
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}
.ml-0 {
  margin-left: 0 !important;
}
.ml-1 {
  margin-left: 10px !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 10px !important;
}
.mt-2 {
  margin-top: 20px !important;
}
.mt-3 {
  margin-top: 30px !important;
}
.mt-4 {
  margin-top: 40px !important;
}
.mt-5 {
  margin-top: 50px !important;
}
.mt-6 {
  margin-top: 60px !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 10px !important;
}
.mb-2 {
  margin-bottom: 20px !important;
}
.mb-3 {
  margin-bottom: 30px !important;
}
.mb-4 {
  margin-bottom: 40px !important;
}
.mb-5 {
  margin-bottom: 50px !important;
}
.mb-6 {
  margin-bottom: 60px !important;
}
.vertical-align-middle{
  vertical-align: middle;
}
.transform-top-mm{
  transform: translateY(3px);
}
figure {
  margin: 20px auto;
  text-align: center;
}
figure img {
  max-width: 100%;
}
figure.has-2figure {
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  column-gap: 10px;
}
figure.has-2figure-settlement {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 60%;
}
.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.credit_img {
  height: 28px;
}
.escott_img {
  height: 60px;
}
sup {
  font-size: 70%;
  position: relative;
  top: -1ex;
}

/*---------------------------
  1.header
---------------------------*/
header p {
  margin: 7px auto;
  width: 127px;
  height: 38px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url("../img/header/if.svg")
    no-repeat center center/contain;
}

/*---------------------------
  2.main
---------------------------*/

/* 2.2 見出し
---------------------------*/
.h1 {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 30px;
  padding: 0.892rem 1rem;
  background: var(--green);
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
  color: #fff;
}
.h1.red {
  background: var(--red);
}
.h2 {
  margin: 30px 0 10px;
  padding: 0.2rem 0.5rem 0.5rem;
  background: var(--oceanGreen);
  text-align: center;
  font-size: 1.6rem;
  line-height: var(--line-height-narrow); /*1.2*/
  font-weight: bold;
  color: #fff;
}
.h3 {
  display: block;
  margin-bottom: 0;
  margin-left: -0.01rem;
  padding: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--oceanGreen);
}
.h3:before {
  content: "■";
  color: var(--oceanGreen);
}
.h3-enquete {
  display: block;
  margin-bottom: 0;
  margin-left: -0.01rem;
  padding: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--oceanGreen);
}
.h3-attention {
  color: var(--red);
  font-weight: bold;
}
.h3-procedure {
  font-size: 1.5rem;
  font-weight: bold;
}
.h3-procedure:before {
  content: "■";
  color: var(--royalblue);
}

/* 2.3 段落・テキスト装飾
---------------------------*/
.list-row {
    display: flex;
    align-items: center;
    gap: 10px; /* dt と dd の間隔 */
}
.list-confirming {
  margin-bottom: 0px;
}
.list-confirmed {
  background: rgba(var(--gray-rgb), 0.4);
  margin-bottom: 20px;
}
.title_small_txt {
  font-size: 1.1rem;
  font-weight: normal;
}
.h2 + .list-confirmed {
  margin-top: -10px;
}
.list-item {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  padding: 0 5px 5px;
}
.no-border {
  border: none !important;
}
.list-confirming .list-item {
  /*border-bottom: 1px dashed rgba(var(--oceanGreen-rgb), 0.4);
  破線はlist-item dashed-line-largeのようにhtml側で書いてください。dashed-line-largeは破線をカスタムしています*/
  text-align: right;
  margin-bottom: 5px;
}
.list-confirmed .list-item {
  border-bottom: 1px dashed rgba(var(--oceanGreen-rgb), 0.4);
}
.list-item-noborder {
  border-bottom: none;
}
.non-border {
  border: none;
}
.attention-important {
  background: rgba(var(--orange-rgb), 0.2);
  padding: 20px;
}
.attentionBackGround{
  background: rgba(var(--orange-rgb), 0.2);
  padding: 20px;
}
.attention-important h3,
.attention-important ol,
.attention-important ul {
  margin-bottom: 0;
}
.attention-important {
  @media screen and (max-width: 990px) {
    margin-right: -20px;
    margin-left: -20px;
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* 2.4 入力フォーム・ボタン
---------------------------*/
input[type="text"].input-form,
input[type="email"].input-form,
input[type="password"].input-form,
select.input-form,
textarea.input-form {
  margin: var(--input-form-margin);
  padding: var(--input-form-padding);
  border: var(--input-form-border);
  border-radius: var(--input-form-border-radius);
  font-size: var(--input-form-font-size);
  width: 100%;
  height: var(--input-form-height);
  font-family: var(--font-family-sans-serif);
  background-color: #edfcfb;
}
.select-wrap {
  /* セレクトボックスの下向▼をデザイン画像に変更*/
  position: relative;
  display: inline-block;
  width: 100%;
  height: var(--input-form-height + --input-form-margin * 2);
}
.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-wrap:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  height: 100%;
  width: 36px;
  background: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22b%22%20data-name%3D%22%E8%83%8C%E6%99%AF%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2213%22%20viewBox%3D%220%200%2020%2013%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.g%20%7B%20fill%3A%20none%3B%20stroke%3A%20%231EB45F%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolyline%20class%3D%22g%22%20points%3D%2216.067%203.263%2010.217%209.263%204.366%203.263%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center center;
  pointer-events: none;
}
input[type="checkbox"] {
  /*チェックボックスのデザインをリセット */
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="checkbox"] {
  cursor: pointer;
  padding-left: 30px;
  vertical-align: middle;
  position: relative;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
  content: "";
  display: block;
  position: absolute;
}
input[type="checkbox"]::before {
  border-radius: 4px;
  border: 1px solid #0084ff;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  top: 50%;
  left: 5px;
}
input[type="checkbox"]::after {
  border-bottom: 3px solid #0084ff;
  border-left: 3px solid #0084ff;
  opacity: 0;
  height: 6px;
  width: 11px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top: -5px;
  left: 9px;
}
/* Sagariのチェックボックス表示崩れ修正 */
_::-webkit-full-page-media, _:future, :root input[type="checkbox"]::after {
	top: 4px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, input[type="checkbox"]::after {
		top: 4px;
	}
}

.input-alert input[type="checkbox"]:checked::before,
input[type="checkbox"]:checked::before {
  border: 1px solid #0084ff;
  box-shadow: none;
}
input[type="checkbox"]:checked::after {
  opacity: 1;
}
.form-check-label {
  cursor: pointer;
}
.text-scroll {
  overflow: scroll;
  height: calc(5em * var(--line-height-default) + 20px);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius);
  padding: 10px;
  font-size: 1.2rem;
  line-height: var(--line-height-default);
}
.button {
  min-width: 90px;
  padding: 1.1rem 0.5rem;
  border-radius: var(--border-radius);
  font-size: 1.3rem;
  text-decoration: none;
  text-align: center;
  border-radius: 50px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.button span {
  font-size: 1.2rem;
  line-height: 1.2;
  word-break: keep-all;
}
.button:hover {
  text-decoration: none;
}
.button.primary {
  background-color: var(--limeGreen);
  color: #fff;
}

.button.primary.creditCardButton{
  float: left;
  margin-left: 0px;
  width: 60%;
  min-width: 150px;
}
.button.primary.payswitchButton{
  float: left;
  margin-left: 0px;
  width: 60%;
  min-width: 150px;
}
.button.danger {
  background-color: #fff;
  border: 1px solid var(--red);
  color: var(--red);
}
.button.secondary {
  background-color: #fff;
  border: 1px solid var(--limeGreen);
  color: var(--limeGreen);
}

.button.secondary.creditCardButton{
  float: right;
  margin-right: 0px;
  width: 60%;
  min-width: 150px;
}
.button.secondary.payswitchButton{
  float: right;
  margin-right: 0px;
  width: 60%;
  min-width: 150px;
}
.button:disabled,
.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.btn-text-break{
  display: none;    
}

.button-wrap-1column {
  margin: 20px 0 30px;
  display: grid;
  grid-template-columns: 100%;
  column-gap: 10px;
  row-gap: 10px;
}
.button-wrap-1column.pay_end{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  min-width: 200px;
}
.button-wrap-2column {
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  column-gap: 10px;
  row-gap: 10px;
}
.button-wrap-2column.paycard-margin {
  margin: 5px 0 10px;
}


.button-wrap-right-column {
  text-align: center;
  text-align: right;
}
.attention-important .button-wrap-1column,
.attention-important .button-wrap-2column{
  margin: 20px 0 10px;
}
/* 郵便番号入力 */
.laylout-zip {
  display: flex;
  align-items: center;
}
/* クレジットカードNo */
.laylout-cardnumber {
  display: flex;
  align-items: center;
}
/* クレジットカード有効期限 */
.laylout-cardexpiration {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 6em 1em 6em;
  column-gap: 0;
}
.CreditCardPaymentCaption{
  text-align: center;
}
.width-3em {
  width: 3em !important;
}
.width-4em {
  width: 4em !important;
}
.width-5em {
  width: 5em !important;
}
.width-6em {
  width: 6em !important;
}
.big-btn {
  width: 95%;
  padding: 20px 0px;
  border: none;
}
.no-border-btn {
  padding: 20px 0px;
  border: none;
}
@media screen and (max-width:500px){
  .non-border{
    border-radius: 10px;
  }
  .btn-text-break{
    display: block;
  }
  .servicemenu_btn{
    max-width: 150px !important;
  }
}
/*---------------------------
    2.6 Table・その他
---------------------------*/

/* Table
---------------------------*/
.table-default {
  width: 100%;
}
.table-default th {
  background-color: var(--table-default-th-background-color);
  padding: var(--table-default-th-padding);
  border: var(--table-default-th-border);
  font-size: var(--table-default-th-font-size);
  color: var(--table-default-td-background-color);
}
.table-default td {
  padding: var(--table-default-td-padding);
  border-bottom: var(--table-default-td-border);
  font-size: var(--table-default-td-font-size);
  text-align: center;
}

.pay-notice {
  width: 100%;
}

.pay-notice th {
  background-color: #d2f7f5;
  padding: 15px 10px;
  border: var(--table-default-th-border);
  font-size: 1.3rem;
  color: #07825d;
  text-align: right;
  width: 20%;
  min-width: 100px;
  display: table-cell;
  vertical-align: middle;
}

.pay-notice td {
  border-top: var(--table-default-td-border);
  border-bottom: var(--table-default-td-border);
  padding: 15px 10px;
  font-size: 1.3rem;
  text-align: left;
  display: table-cell;
  vertical-align: middle;
}

.pay-history {
  width: 100%;
}

.pay-history th {
  background-color: #CDE6DE;
  padding: 10px 10px;
  border: var(--table-paynotice-th-border);
  font-size: 1.3rem;
  color: #07825d;
  text-align: center;
  width: 20%;
  min-width: 90px;
  display: table-cell;
  vertical-align: middle;
}

.pay-history td {
  background-color: #E6F2EE;
  border-top: var(---table-paynotice-td-border);
  border: var(--table-paynotice-td-border);
  padding: 5px 5px;
  font-size: 1.3rem;
  text-align: left;
  margin-left: 10px;
  display: table-cell;
  vertical-align: middle;
}

.payhistory-wrap{
  display: grid;
  grid-template-columns: calc(20%) calc(80%);
  background-color: #B4D9CE !important;
  align-items: center;
}

.lisence-wrap{
  padding: 5px;
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  align-items: center;
}

.date-wrap{
  display: flex;
  flex-direction: column;
  padding: 5px;
  align-items: flex-start;
  margin-left: 10px;
}

.lisence-label,
.enddate-label,
.pay-label,
.date-label,
.register-label{
  text-align: right;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 5px;
}
.pay-date-label{
  font-weight: bold;
  font-size: 13px;
}

.lisence-value,
.enddate-value,
.pay-value,
.date-value,
.register-value{
  text-align: left;
  font-size: 1.6rem;
  padding: 5px;
}

@media screen and (max-width: 767px) {
  .ml-1{
    margin-left: 0px !important;
  }
  .lisence-wrap {
    display: flex;
    flex-direction: column;
  }
  .lisence-label,
  .enddate-label,
  .pay-label{
    text-align: center;
    font-size: 1.4rem;
  }
  .lisence-value,
  .enddate-value,
  .pay-value{
    text-align: center;
  }
  .payhistory-wrap{
    display: flex;
    flex-direction: column;
    
  }
  .date-wrap{
    margin-left: 0;
    flex-direction: row;
  }
}

/*---------------------------
  3.footer
---------------------------*/
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0.892rem calc(50vw - 475px);
  background-color: var(--green);
  text-align: center;
}
@media screen and (max-width: 767px) {
  footer {
    text-align: left;
  }
}
.footer-copy {
  font-size: 1rem;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .footer-copy {
    text-align: center;
    margin: 10px auto;
  }
}
@media screen and (max-width: 767px) {
  .footer-link {
    display: table;
    margin: 10px auto;
  }
}
.footer-link > * {
  display: inline;
}
.footer-link > * > * {
  display: inline-block;
  position: relative;
  margin: 0 10px 0 0;
  padding: 0 0 0 20px;
  font-size: 1.2rem;
  text-decoration: none;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .footer-link > * {
    display: block;
  }
}
.footer-link > * > a:visited {
  color: #fff;
}
.footer-link > * > *:before {
  display: inline-block;
  width: 13px;
  height: 13px;
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  content: "";
  background: url("data: image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48ZGVmcz48c3R5bGU+Lmd7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iZyIgZD0ibTYuNS4xYzMuNTMsMCw2LjQsMi44Nyw2LjQsNi40cy0yLjg3LDYuNC02LjQsNi40Uy4xLDEwLjAzLjEsNi41LDIuOTcuMSw2LjUuMVptLTIuOCw2Yy0uMjIsMC0uNC4xOC0uNC40cy4xOC40LjQuNGg0LjYzbC0xLjcyLDEuNzJjLS4xNi4xNi0uMTYuNDEsMCwuNTdzLjQxLjE2LjU3LDBsMi40LTIuNGMuMTYtLjE2LjE2LS40MSwwLS41NywwLDAsMCwwLDAsMGwtMi40LTIuNGMtLjE2LS4xNi0uNDEtLjE2LS41Nywwcy0uMTYuNDEsMCwuNTdsMS43MiwxLjcySDMuN1oiLz48L3N2Zz4=")
    no-repeat top left/contain;
}

/*---------------------------
  4.個別ページ
---------------------------*/

/*契約メニュー一覧ページ
---------------------------*/
#menu__index.content-wrapper {
  padding: 0 20px calc(77px + 50px);
}
#menu__index.content-wrapper {
  @media screen and (max-width: 767px) {
    padding: 0 20px calc(135px + 0);
  }
}
#menu__index.content-wrapper main h1:first-child {
  margin-bottom: 10px;
}
.servicemenu_btn {
  width: 100%; 
  min-width: 90px;
  max-height: 50px;
  white-space: normal;
  text-align: center;
} 

#payhistory.content-wrapper {
  padding: 0 20px calc(335px + 50px);
}
.list-userserial {
  position: relative;
  margin-bottom: 10px;
}
.now-login-status {
  padding: 5px;
  position: absolute;
  top: 0px;
  right: 0px !important;
  background-color: var(--red);
  font-size: 1.2rem;
  color: #fff;
}
.now-login-status {
  @media screen and (max-width: 990px) {
    right: -20px;
  }
}
.contract-informaiton {
  position: relative;
  background-color: rgba(var(--oceanGreen-rgb), 0.45);
  padding: 5px;
}
.contract-informaiton-login{
  position: relative;
  background-color: rgba(var(--red-rgb), 0.45);
  padding: 8px;
}
.contract-informaiton-login-color{
  background-color: #6ec832 !important;
}
.contract-informaiton .contract-type {
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 2px;
  border-radius: var(--border-radius);
  font-size: 1.4rem;
  color: #fff;
}
.contract-informaiton .contract-type.monthly {
  background-color: var(--oceanGreen);
}
.contract-informaiton .contract-type.yearly {
  background-color: var(--lime);
}
.lime {
  background-color: var(--oceanGreen) !important;
}
.EarlyPurchaseCampaignString{/*早期キャンペーンの文字*/
  color: #FFFD87;
}
.EarlyPurchaseCampaignArea{/*早期キャンペーンの背景*/
  background-color: var(--mintIce);
  padding-bottom: 10px;
}
.EarlyPurchaseCampaignArea.pay_end{
  margin-top: 60px;
  margin-bottom: 60px;
}
.greenBackArea{
  background-color: var(--mintIce);
}
.contract-informaiton {
  position: relative;
}
.contract-informaiton .contract-start,
.contract-informaiton .contract-end {
  display: inline-block;
  font-size: 1.5rem;
  margin-bottom: 1.0rem;
}
.contract-informaiton .contract-end {
  margin-left: calc(1.5rem * 3 + 10px + 5px);
}
.contract-informaiton .serial-id {
  margin: 5px;
  font-size: 1.8rem;
}
.serial-id-label,
.contract-start-label,
.contract-end-label {
  font-size: 1.2rem;
}
.serial-id-label:after,
.contract-start-label:after,
.contract-end-label:after {
  content: " : ";
}
.procedure-bottom-wrap {
  padding: 10px;
  background-color: rgba(var(--oceanGreen-rgb), 0.2);
}
.procedure-bottom-wrap-login-color{
  background-color: #dbf1cc !important;
}
.procedure-bottom-wrap .button-wrap-2column {
  margin-top: 10px;
}

.procedure-button-wrap{
  display: grid;
  grid-template-columns: 25% 70%;
  column-gap: 5%;
  padding: 10px;
  background-color: rgba(var(--oceanGreen-rgb), 0.2);
}

.date-info{
  font-size: 1.5rem;
}
.service-button-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5px;
  align-items: center;
}

.service-button-wrap .btn-left{
  grid-column: 1;
}
.service-button-wrap .btn-center{
  grid-column: 2;
}
.service-button-wrap .btn-right{
  grid-column: 3;
}


@media screen and (max-width: 767px){
  .lisence-wrap{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
  }
  .date{
    font-size: 1.0rem;
  }
}
@media screen and (max-width: 960px) {
  .procedure-button-wrap{
    display: flex;
    flex-direction: column;
  }
  .service-button-wrap{
    margin-top: 10px;
  }
}

.pay_notice {
  border: none;
  background: #fff;
  color: var(--royalblue);
  text-decoration: underline;
  margin-bottom: 5px;
  cursor: pointer;
}
.service_yearlyAuto_area {
  padding: 0px 0px 10px;
  margin-bottom: 10px;
  display: block;
  font-weight: bold;
}
.service_yearlyAuto::before {
  content: "■";
  color: var(--red);
  margin-right: 2px;
}
ul#servicepage_attention_area {
  display: table;
  margin: 0 auto;
}
.attention_str {
  padding: 10px 5px 15px;
  font-weight: bold;
}
.attention_str::before {
  content: "■";
  color:var(--green);
  margin-right: 3px;
}

.downloadArea{
  width: 100%;
  padding: 0.5reml;
}
.back-red {
  background-color: #FF4B63
}
.h3.necessary:before {
  content: "■";
  color: var(--red);
}
.qr_image {
  width: 256px;
}
.AdjustmentButtonMargin{
  margin-top: 50px;
  margin-bottom: 50px;
}
@media screen and (max-width: 1024px) {
  .content-wrapper {
    padding: 0 20px calc(135px);
  }
}
@media (max-width: 960px) {
  .radio_license {
    padding: 5px 0px 15px;
    vertical-align: middle;
    width: 100%;
    justify-content: center; 
  }
  .license_radio {
    width: 2rem;
    height: 2rem;
    margin-top: -.25rem;
    margin-left: 0.35rem;
    margin-top: 28px;
    margin-left: 12px;
    margin-right: 290px
  }
  .ContractAmount {
    align-items: center;
    float: right;
    gap: 10px;
    flex-wrap: wrap;
    text-align: left;
    display: block;
  }
  .ContractPlan{
    padding-top: 30px;
    padding-right: 30px;
    display: flex;
    align-items: center;
    text-align: left;
    display: inline-block;
    margin-left: 0px;
  }  
  .ContractPlanOnlyMonthly{
    padding-right: 30px;
    display: flex;
    align-items: center;
    text-align: left;
    margin-left: 0px;
  }
  .radio_license_txt {
  margin-left: 28px;
  word-break: keep-all;
  text-align: left;
  width: 100%;
  }
  .ContractAmount br,
  .ContractAmount br + br {
    display: block;
  }
  .diaperedBrS{
    margin-top: 10px;
    display: inline-block;
    vertical-align: bottom;
  }
  .diaperedBrS div:empty,
    .diaperedBrS br {
        display: none;  /* brを非表示 */
  }
  .diaperedBrS .slash-separator {
      display: none;
  }
  .ContractAmountLeft{
    margin-left: 0px;
    margin-top: 3px;
    margin-bottom: 15px;
  }
  .ContractAmountRight {
    padding: 0;
  }
  .ContractAmountRightM {
    padding: 0;
  }
  .MonthlyPlan{
    margin-right: 0px;
  }
  .centerScreen{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding-bottom: 95px;/*フッター込みでの中央配置*/
  }
  .centerScreenResetForMobile{
    position: static; /* 位置指定をリセット */
    transform: none; /* 変形をリセット */
    left: auto;
    top: auto;
    width: auto; /* 幅をデフォルトに戻す */
    padding-bottom: 0; /* パディングをリセット */
  }
  .attentionBackGround{
    background: rgba(var(--orange-rgb), 0.2);
    padding: 20px;
    margin-bottom: 50px;
  }
  .lMarginBottom{
    margin-bottom: 100px;
  }
  .MMarginBottom{
    margin-bottom: 50px;
  }
  .pMarginBottom{
    margin-bottom: 25px;
  }
  .sMarginBottom{
    margin-bottom: 10px;
  }
  .eraseBR br {
    display: none !important;
  }
  .long-text-button {
    white-space: normal;
    word-break: break-all;
    overflow-wrap: break-word;
    min-height: 44px;
    Max-width: 150px;
  }
    th .license-id {
      display: block;  /* 改行させる */
  }
  
  th .serial-id {
      display: block;
  }
}