@charset "UTF-8";



:root {
  --color-white: #fff;
  --color-black: #333;
  --color-red: #d10000;
  --color-lightBlue: #edf8ff;
  --color-blue: #0075c2;
  --color-lightYellow: #ffffce;
  --color-lightGreenBK: #def1e4;
  --color-lightGreenBK2: #eafdea;
  --color-lightGreen: #f4fef4;
}
/*------------------------------------------------------

	/card/servicelist/index.html

-------------------------------------------------------- */
.fontsize-adj-100{
	font-size: 100%;
}

.minitwo{
	top:2px;
	position:relative;
}




/* 背景色 */
.specialContent {
    background: var(--color-lightGreen);
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-lightGreen) 320px, var(--color-lightGreen) 100%);
    padding-bottom: min(13.33vw, 100px);
}

@media print, screen and (min-width: 751px) {
    .specialContent {
        padding-bottom: 60px;
    }
}

.special {
    margin-bottom: 0;
}
/* メインビジュアル */

/* .specialHeader img {
    max-width: 100%;
    vertical-align: bottom;
} */



@media print, screen and (min-width: 751px) {
    .specialHeader {
        margin: min(3.73vw, 40px) 0;
        padding: 0 min(5.6vw, 60px);
    }
}

.specialHeader-ttl {
    text-align: center;
}
@media screen and (max-width: 900px) {
    .specialHeader-ttl img {
        width: 100%;
    }
}

@media print, screen and (min-width: 901px) {
    .specialHeader-ttl img {
        min-width: 780px;
    }
}
/* 会員限定特典：リンクリスト */


.bl_servicelinkList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw 4%;
  /* grid-template-rows: repeat(6, auto); 必須 */
  grid-template-rows: repeat(6, minmax(0, auto));
}
@media screen and (min-width: 751px) {
  .bl_servicelinkList {
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 0 25px;
    margin-top: 0;
  }
}


.bl_servicelinkList-item {
    flex-basis: calc((100% - 14px) / 2);
    flex-basis: 48%;
    justify-content: space-around;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: subgrid;
    grid-row: span 3;
    margin-bottom: 35px;
    text-align: center;
}
@media screen and (min-width: 751px) {
  .bl_servicelinkList-item {
  flex-basis: calc((100% - 30px) / 3);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin-bottom: 35px;
  }
}

.bl_servicelinkList-item > a {
  display: block;
  height: 100%;
  padding: 2.13vw 2.13vw 4.26vw;
  color: inherit;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 0 1px #e8e8e8;
  position: relative;
}
@media screen and (min-width: 751px) {
  .bl_servicelinkList-item > a {
    padding: 10px 10px 20px;
  }
}
.bl_servicelinkList-item > a::after {
  content: "";
  display: block;
  width: 3.2vw;
  height: 3.2vw;
  background: url(/card/shared/img/icon_circle_arrow.svg) no-repeat 0 0;
  background-size: auto 100%;
  position: absolute;
  right: 1.6vw;
  bottom: 1.6vw;
}
@media screen and (min-width: 751px) {
  .bl_servicelinkList-item > a::after {
    right: 0.435em;
    bottom: 0.435em;
    width: min(0.87em, 14px);
    height: min(0.87em, 14px);
  }
}
.bl_servicelinkList-item > a[href^="#"]::after {
  background-image: url(/card/shared/img/icon_anchor.svg);
}
.bl_servicelinkList-item > a[target=_blank]::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%3E%3Cpath%20d%3D%22M7.428%2C8H2.857a.573.573%2C0%2C0%2C1-.572-.572V5.714H.571A.572.572%2C0%2C0%2C1%2C0%2C5.143V.571A.572.572%2C0%2C0%2C1%2C.571%2C0H5.143a.572.572%2C0%2C0%2C1%2C.571.571V2.285H7.428A.573.573%2C0%2C0%2C1%2C8%2C2.857V7.428A.573.573%2C0%2C0%2C1%2C7.428%2C8Zm-4-2.286V6.857H6.857V3.429H5.714V5.143a.572.572%2C0%2C0%2C1-.571.571ZM1.143%2C1.143V4.571H4.571V1.143Z%22%20fill%3D%22%230075C2%22%2F%3E%3C%2Fsvg%3E");
}
@media screen and (min-width: 751px) {
  .bl_servicelinkList-item > a[target=_blank]::after {
    width: min(0.75em, 12px);
    height: min(0.75em, 12px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .bl_servicelinkList-item > a {
    transition: 0.3s;
  }
  .bl_servicelinkList-item > a:hover {
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
  }
}
.bl_servicelinkList-item.gold a {
  box-shadow: 0 0 0 1px #d1b168;
}
@media (hover: hover) and (pointer: fine) {
  .bl_servicelinkList-item.gold a {
    transition: 0.3s;
    width: 90%;
  }
  .bl_servicelinkList-item.gold a:hover {
    box-shadow: 0 0 16px 0 rgba(209, 177, 104, 0.6);
  }
}
.bl_servicelinkList-itemImg {
  display: inline-flex;
  align-items: center;
  /* align-items: flex-start; */
  justify-content: center;
}
@media screen and (min-width: 751px) {
  .bl_servicelinkList-itemImg {
    height: 88px;
  }
}
.bl_servicelinkList-itemImg .u-imgMax {
  width: auto;
  max-height: 100%;
}
.bl_servicelinkList-itemText {
  font-weight: 600;
  font-size: 18px;
}
@media screen and (min-width: 751px) {
  .bl_servicelinkList-itemText {
    /* font-size: 0.87em; */
    font-size: 1.5em;
  }
}

/* 会員限定特典：一覧 */
@media screen and (max-width: 750px) {
  .bl_serviceList > section {
    margin: 0;
  }
}
.bl_serviceList > section .js-spToggle {
  margin-bottom: 0;
}
@media screen and (max-width: 750px) {
  .bl_serviceList > section .js-spToggle {
    padding: 0.6em 0.8em;
    color: #ffffff;
    background-color: #222222;
    border-top: 1px rgba(255, 255, 255, 0.12) solid;
    position: relative;
  }
  .bl_serviceList > section .js-spToggle::after {
    width: 4.26vw;
    height: 4.26vw;
    background: url(/card/shared/img/icon_circle_plus.svg) no-repeat center/contain;
    position: absolute;
    right: 0.8em;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
@media screen and (max-width: 750px) {
  .bl_serviceList > section .js-spToggle.is-open::after {
    background-image: url(/card/shared/img/icon_circle_minus.svg);
  }
}


.bl_serviceBenefitsTtl {
  /* margin-bottom: 0.6em; */
  margin-bottom: 0.1em;
  margin-top: 0.8em;
  min-width: 65px;
}
@media screen and (min-width: 751px) {
  .bl_serviceBenefitsTtl {
  margin-bottom: 0.6em;
  margin-top: 0;
  min-width: 78px;
}
}
.bl_serviceBenefitsTtl > img {
  width: min(16vw, 73px);
  max-width: 100%;
  height: auto;
  vertical-align: text-bottom;
  margin-right: 5px;
}
@media screen and (min-width: 751px) {
  .bl_serviceBenefitsTtl > img {
    width: min(9.35%, 73px);
  }
}
.bl_serviceBenefitsTtl > img.w180 {
  width: min(37.33vw, 180px);
}
@media screen and (min-width: 751px) {
  .bl_serviceBenefitsTtl > img.w180 {
    width: min(23.07%, 180px);
  }
}

/* 「ビューカードアプリ」のダウンロード */

.division.note {
        margin: min(2.9296875vw, 8px) 0 0;
        text-align: center;
    }

@media print, screen and (min-width: 751px) {
    .gridLyt {
        width: 100%;
    }
}

@media print, screen and (min-width: 751px) {
    .bl_servicelinkList .gridLyt_col:nth-of-type(odd) {
        margin-right: 0;
    }
}

@media only screen and (max-width: 750px) {
    .bl_servicelinkList .gridLyt_col:not(:first-child) {
        margin-top: 1vw;
    }
}
@media print, screen and (min-width: 751px) {
    .bl_servicelinkList .gridLyt_col {
        width: 100%;
        margin-top: 15px;
    }
}

@media screen and (min-width: 751px) {
    .bl_servicelinkList-itemImg {
      width: 100%;
        height: auto;
    }
}
.bl_servicelinkList-itemImg .u-imgMax {
    width: 100%;
    max-height: 215px;
}

@media screen and (min-width: 751px) {
.bl_service-tokuten{
  display: flex;
}

    .bl_service-tokuten .bl_serviceBenefitsTtl > img {
        width: min(83%, 73px);
    }
}

.anchorList{
  display: flex;
  justify-content: space-around;
  width: 80%;
}

.bl_wi_info_details{
  margin-top: 80px;
}

/*アコーディオンボタンのデザイン */
.page-unique-toggleBtn {
    position: relative;
}
 
.page-unique-toggleBtn::before{
  position: absolute;
  content: '';
  top: 50%;
  right: 25px;
  width: 20px;
  height: 3px;
  background-color:#0075c2;
  transition: all .3s ease-in-out;
}
.page-unique-toggleBtn::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 25px;
  width: 20px;
  height: 3px;
  background-color:#0075c2;
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}


.page-unique-toggleBtn.is-open::after {
    transform: rotate(180deg);
}

.page-unique-toggleBtn.is-open::after {
  opacity:0;
}



.page-unique-toggleBtn, .page-unique-toggleBtn-b {
    display: block;
    width: 100%;
    padding: 5px 10px;
    background: none;
    text-align: start;
    font-size: clamp(13px, 4.1025641026vw, 31px);
    font-family: "Noto Sans JP";
    cursor: pointer;
    appearance: none;
    border: none;
    margin-bottom: 1em;
    border: 1px solid #e8e8e8;
}

@media print, screen and (min-width: 751px) {
    .page-unique-toggleBtn, .page-unique-toggleBtn-b {
        font-size: clamp(12px, 1.5625vw, 16px);
    }
}
.page-unique-toggleBtn {
    background: #f5f6f7;
}

.compartment-alert {
    border: 1px solid #042433;
    background: #ffffff;
}
/*# sourceMappingURL=servicelist.css.map */