@charset "utf-8";
/*-------------------------------------
タブ外側
-------------------------------------*/
.howto-upgrade{
  width:100%;
  position:relative;
  text-align:center;
  padding: 60px 0 !important;
  margin-bottom: 0 !important;
}
.howto-upgrade.mt150{
  padding: 0 !important;
}
 
.upgrade__inner{
  position:relative;
  margin:auto;
  width:calc(100% - 30px);
  max-width:1140px;
  text-align:center;
}
.upgrade__title{
  font-size: clamp(18px, 0.625rem + 2.5vw, 40px);
  font-weight: bold;
  color: #004da1;
  margin-bottom: 10px;
  letter-spacing: 0.2rem;
}
.upgrade__lead{
  font-size: clamp(14px, 0.784rem + 0.45vw, 18px);
  line-height:1.6;
}
.upgrade__lead em{
  font-weight:bold;
  font-style:normal;
}
.howto-upgrade p{
  margin-bottom:0 !important;
}
.howto-upgrade a.txt-link{
  cursor:pointer;
  color: #00a2e6 !important;
  text-decoration: underline !important;
}
.howto-upgrade a.txt-link:hover{
  opacity: 0.7;
}
  
@media print,screen and (max-width:767px) {
  .upgrade__lead{
    text-align:left;
  }
} 
  
/*-------------------------------------
タブ
-------------------------------------*/

/* ボタン */
.upgrade__tab-switch-pc,
.upgrade__tab-switch-sp{
  display: none;
}
.upgrade__tab-label-pc{
  display:block;
}
.upgrade__tab-label-sp{
  display:none;
}
/* タブ */
.upgrade__tab-set {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}
/* タブ名 */
.upgrade__tab-label-pc {
  color: #004da1;
  background: #b2cae3;
  padding: 20px 0;
  margin-left: 10px;
  order: -1;
  position: relative;
  line-height: 1;
  cursor: pointer;
  width:calc((100% - 20px) / 3);
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  text-align:center;
  font-size:clamp(16px, 0.909rem + 0.45vw, 20px);
  font-weight:bold;
  letter-spacing:0.1em;
}
#tab01-pc+.upgrade__tab-label-pc,
#tab01-sp+.upgrade__tab-label-pc{
  margin-left: 0;
}
/* タブをクリックした時 */
.upgrade__tab-switch-pc:checked + .upgrade__tab-switch-sp + .upgrade__tab-label-pc {
  background: #004da1;
  color: #fff;
}
.upgrade__tab-switch-pc:checked + .upgrade__tab-switch-sp + .upgrade__tab-label-pc +.upgrade__tab-label-sp + .upgrade__tab-content {
  display: block;
}
/* 本文 */
.upgrade__tab-content {
  display: none;
  padding: 30px 0;
  border-top: 1px solid #004da1;
  text-align:left;
  width:100%;
	transition: all .3s;
}
/* 769px以下 */
@media print,screen and (max-width:767px) {
  .upgrade__tab-switch-pc:checked + .upgrade__tab-switch-sp + .upgrade__tab-label-pc +.upgrade__tab-label-sp + .upgrade__tab-content {
    display: none;
  }
  .upgrade__tab-set {
    display: block;
    margin-top: 20px;
  }
  .upgrade__tab-label-sp {
    position:relative;
    display: block;
    margin-bottom:2px;
    padding: 20px;
    width:100%;
    text-align:left;
    color: #fff;
    background: #004da1;
    font-size:clamp(16px, 0.909rem + 0.45vw, 20px);
    font-weight:bold;
    letter-spacing:0.1em;
  }
  .upgrade__tab-label-sp::before {
    position: absolute;
    content: '';
    width: 14px;
    height: 2px;
    top: calc(50% - 1px);
    right: 14px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background: #fff;
  }
  .upgrade__tab-label-sp::after {
    position: absolute;
    content: '';
    width: 2px;
    height: 14px;
    top: calc(50% - 7px);
    right: 20px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background: #fff;
  }
  .upgrade__tab-content {
    border-top: none;
    padding: 20px 0;
  }
  /* タブをクリックした時 */
  .upgrade__tab-switch-sp:checked + .upgrade__tab-label-pc + .upgrade__tab-label-sp::after{
    transform: rotate(90deg);
    transition: 0.3s all;
  }
  .upgrade__tab-switch-sp:checked + .upgrade__tab-label-pc + .upgrade__tab-label-sp + .upgrade__tab-content {
    display: block !important;
  }
  .upgrade__tab-label-pc{
    display:none;
  }
}
  
/*-------------------------------------
タブ中身
-------------------------------------*/
:root{
  --upgrade-gap: 40px;
}
@media screen and (max-width: 767px) {
  :root{
    --upgrade-gap: 20px;
  }
}

/* リードリスト */
.upgrade__tab-content__lead{
  width:100%;
  list-style-type: disc;
  padding-left:2em;
  margin-bottom:var(--upgrade-gap);
}
.upgrade__tab-content__lead li{
  font-size:clamp(14px, 0.648rem + 1.14vw, 24px);
  line-height:1.2;
  margin-top:10px;
}
.upgrade__tab-content__lead li:first{
  margin-top:0;
}

/* 補足 */
.howto-upgrade p.upgrade__tab-content__note{
  margin-bottom: var(--upgrade-gap) !important;
  font-size:clamp(14px, 0.648rem + 1.14vw, 24px) !important;
  font-weihgt:bold;
  color:#00a2e6 !important;
}

/* ボタン */
.upgrade__tab-content__btn{
  margin:auto;
  width: 90%;
  max-width: 600px;
}
.upgrade__tab-content__btn a{
  position:relative;
  display:block;
  cursor: pointer;
  width: 100%;
  padding:20px;
  background:#004da1;
  color:#fff !important;
  border-radius: 15px;
  text-align:center;
  font-weight:bold;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  transition: all 0.2s ease;
}
.upgrade__tab-content__btn a::after {
  position: absolute;
  content: '';
  top: calc((100% - 17px) / 2);
  right: 20px;
  width: 11px;
  height: 17px;
  background: transparent url(../../img/out-of-warranty/angle-right-solid_w.webp) no-repeat center center / cover;
}
.upgrade__tab-content__btn a:hover{
  background:#3573cc;
}
@media screen and (max-width: 767px) {
  .upgrade__tab-content__btn a{
    padding: 20px 10px 20px 0;
  }
  .upgrade__tab-content__btn a::after {
    right: 10px;
  }
}


/* 番号リスト */
.upgrade__tab-content ol{
  width:100%;
  margin-bottom:var(--upgrade-gap);
}
.upgrade__tab-content ol > li{
  position:relative;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  line-height:1.6;
  padding:30px 0 30px 3em;
  border-bottom:1px dotted #ccc;
  counter-increment: reason-counter;
}
.upgrade__tab-content ol > li::before {
  content: "0" counter(reason-counter);
  position: absolute;
  left: 0;
  top: calc(50% - 0.5em);
  font-size:1.4em;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  line-height:0.8;
  color:#999;
}
.upgrade__tab-content ol > li:first-child{
  border-top:1px dotted #ccc;
}
  
@media print,screen and (min-width:768px) {
  .upgrade__tab-content ol > li.icon-box,
  .upgrade__tab-content ol > li.icon-delivery{
    padding-right:80px;
  }
  .upgrade__tab-content ol > li.icon-box::after,
  .upgrade__tab-content ol > li.icon-delivery::after{
    position: absolute;
    content: '';
    top: calc((100% - 60px) / 2);
    right: 0;
    width: 60px;
    height: 60px;
    z-index: +1;
  }
  .upgrade__tab-content ol > li.icon-box::after{
    background: transparent url(../../img/cleaning/icon_02.webp) no-repeat center center / contain;
  }
  .upgrade__tab-content ol > li.icon-delivery::after{
    background: transparent url(../../img/cleaning/icon_01.webp) no-repeat center center / contain;
  }
  
  .upgrade__tab-content ol > li.icon-qr{
    padding-right:134px;
    padding-top:50px;
    padding-bottom:50px;
  }
  .upgrade__tab-content ol > li.icon-qr::after{
    position: absolute;
    content: '';
    top: calc((100% - 114px) / 2);
    right: 0;
    width: 114px;
    height: 114px;
    z-index: +1;
  }
  .upgrade__tab-content ol > li.icon-qr::after{
    background: transparent url(../../img/cleaning/qrcode.webp)no-repeat center center / contain;
  }
  
  .upgrade__tab-content ol > li.icon-card{
    padding-right:185px;
    padding-top:50px;
    padding-bottom:50px;
  }
  .upgrade__tab-content ol > li.icon-card::after{
    position: absolute;
    content: '';
    top: calc((100% - 118px) / 2);
    right: 0;
    width: 165px;
    height: 118px;
    z-index: +1;
  }
  .upgrade__tab-content ol > li.icon-card::after{
    background: transparent url(../../img/cleaning/cleaningcard.webp) no-repeat center center / contain;
  }
}

@media print,screen and (max-width:767px) {
  .upgrade__tab-content ol > li{
    padding: 15px 0 15px 3em;
  }
}

/* 持ち物 */
.upgrade__tab-content__bring{
  margin-top:30px;
  padding-top:30px;
  border-top:1px dotted #ccc;
}
.upgrade__tab-content__bring h4{
  font-weight:bold;
  font-size:clamp(14px, 0.648rem + 1.14vw, 24px);
  margin-bottom:10px;
}
.upgrade__tab-content__bring-wrap{
  display:flex;
  gap:30px;
  width:100%;
}

.upgrade__tab-content__bring-wrap dl{
  display:block;
  width:calc((100% - 30px) / 2);
  border:2px solid #eee;
  border-radius:15px;
  overflow: hidden;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
}
.upgrade__tab-content__bring-wrap dl dt{
  color:#004da1;
  font-weight:bold;
  margin-bottom:5px;
  background:#eee;
  padding:10px 15px;
}
.upgrade__tab-content__bring-wrap dl dd{
  text-align:left;
  padding:20px;
}
.upgrade__tab-content__bring-wrap dl dd ul{
  list-style-type: disc;
  margin-left:1.5em;
}
.upgrade__tab-content__bring-wrap dl dd ul li{
  margin-top:10px;
}
.upgrade__tab-content__bring-wrap dl dd ul li:first-child{
  margin-top:0;
}

/* 注意書き */
.upgrade__caution{
  margin-top:20px;
}
.upgrade__caution li{
  position:relative;
  padding-left:1.5em;
  font-size:clamp(10px, 0.534rem + 0.45vw, 14px);
  line-height:1.4;
}
.upgrade__caution li::before{
  position:absolute;
  content:'※';
  left:0;
  top:0;
}

@media print,screen and (max-width:767px) {
 .upgrade__tab-content__bring-wrap{
    display:flex;
    gap:20px;
    flex-direction: column;
  }
  .upgrade__tab-content__bring-wrap dl{
    width:100%;
  }
}

/*-------------------------------------
特急サービス
-------------------------------------*/
.tokkyu-service{
  width:100%;
  max-width:860px;
  margin:40px auto 0 auto;
}

.tokkyu-service .service-title a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px solid #2c82c9;
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
  margin-bottom:20px;
}
.tokkyu-service .service-title a:hover{
  opacity: 0.7;
}

.tokkyu-service .service-title img{
  width:35% !important;
  margin:auto;
}
.tokkyu-service .service-title h2 {
  width:60% !important;
  font-size:clamp(18px, 0.852rem + 1.36vw, 30px) !important;
  color: #245aa4;
  font-weight: 600;
  margin-bottom: 0px !important;
  line-height:1.4;
}
.tokkyu-service .service-title h2 .tokyuTxt {
  font-size: clamp(16px, 0.955rem + 0.23vw, 18px)!important;
}
.tokkyu-service .service-title h2 .tokyuTitle{
  color: #00a2ed;
  font-size: clamp(32px, 1rem + 5vw, 76px) !important;
}

.tokkyu-service p,
.tokkyu-service ul{
  font-size:14px;
  text-align:left;
  line-height:1.6;
  width:100%;
}

.tokkyu-service ul{
  margin:10px 0;
  list-style:disc;
  padding-left:2em;
}

@media screen and (max-width: 479px) {
  .tokkyu-service{
    margin-top:20px;
  }
 .tokkyu-service .service-title a{
    flex-direction: column;
  }
  .tokkyu-service .service-title img{
    width:80% !important;
  }
  .tokkyu-service .service-title h2{
    width:100% !important;
  }
}