@charset "UTF-8";
/** -----------------------------------
	共通
---------------------------------------- ***/
.service-deposit .intro-copy .page-ttl-sub {
  display: block;
  font-size: 30px;
}
.service-deposit .main-img {
  width: 257px;
  padding-top: 65px;
  margin-left: 80px;
}
@media screen and (max-width: 1100px), print {
  .service-deposit .main-img {
    margin-left: 40px;
  }
}
@media screen and (max-width: 768px), print {
  .service-deposit .intro-copy .page-ttl-sub {
    font-size: calc(45/750*100vw);
  }
  .service-deposit .main-img {
    width: calc(375/750*100vw);
    padding-top: calc(40/750*100vw);
    margin: auto;
  }
}

.main-contents {
  padding-top: 90px;
}
@media screen and (max-width: 768px), print {
  .main-contents {
    padding-top: 80px;
  }
}

/** -------------------------------------------
	積⽴⾦は、商品購⼊・サービス利⽤にも使えます。
----------------------------------------------- ***/
.deposit-buy .base-txt {
  margin-top: 30px;
}
@media screen and (max-width: 768px), print {
  .deposit-buy .base-txt {
    margin-top: calc(40/750*100vw);
  }
}

.deposit-buy-img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.deposit-buy-img .img-item.cheers {
  width: 348px;
  margin-right: 30px;
}
.deposit-buy-img .img-item.clothes {
  width: 315px;
  margin-right: 80px;
}
.deposit-buy-img .img-item.shichigosan {
  width: 216px;
}
@media screen and (max-width: 768px), print {
  .deposit-buy-img {
    margin-top: calc(60/750*100vw);
    /*
    		flex-direction: column;
    		align-items: center;
    */
  }
  .deposit-buy-img .img-item.cheers {
    width: 36%;
    margin-right: 1%;
  }
  .deposit-buy-img .img-item.clothes {
    width: 32%;
    margin-right: 5%;
  }
  .deposit-buy-img .img-item.shichigosan {
    width: 26%;
  }
}

/** -----------------------------------
	積⽴と利⽤のイメージ
---------------------------------------- ***/
.deposit-impression {
  padding-top: 100px;
}
.deposit-impression .disc-list {
  margin-top: 30px;
}
.deposit-impression .disc-list .disc {
  padding-left: 17px;
  position: relative;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: .06em;
}
.deposit-impression .disc-list .disc::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  top: 0.7em;
  left: 0;
  background-color: #003d8b;
}
.deposit-impression .impression-img {
  max-width: 617px;
  margin: 50px auto 0;
}
@media screen and (max-width: 768px), print {
  .deposit-impression {
    padding-top: calc(120/750*100vw);
  }
  .deposit-impression .disc-list .disc {
    padding-left: calc(34/750*100vw);
    font-size: calc(30/750*100vw);
  }
  .deposit-impression .disc-list .disc::before {
    width: calc(16/750*100vw);
    height: calc(16/750*100vw);
    top: calc(20/750*100vw);
  }
  .deposit-impression .impression-img {
    margin: calc(100/750*100vw) auto 0;
  }
}

/** -----------------------------------
	サービスの活⽤例
---------------------------------------- ***/
.usage-example {
  padding: 110px 0 0;
}
@media screen and (max-width: 768px), print {
  .usage-example {
    padding-top: calc(120/750*100vw);
  }
}

.usage-example-detail {
  margin-top: 25px;
  border: 1px solid #cacaca;
}
.usage-example-detail .example-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid #cacaca;
}
.usage-example-detail .example-top .ex-person-img {
  width: 145px;
}
.usage-example-detail .example-top .example-txt {
  display: flex;
  align-items: center;
}
.usage-example-detail .example-top .example-txt p {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .06em;
}
.usage-example-detail .example-top .example-txt .note-txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.usage-example-detail .example-inner {
  padding: 45px 28px 20px;
}
.usage-example-detail .example-inner .note-txt {
  margin-top: 15px;
  font-size: 16px;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 768px), print {
  .usage-example-detail {
    margin-top: calc(50/750*100vw);
  }
  .usage-example-detail .example-top {
    gap: calc(20/750*100vw);
    padding: calc(40/750*100vw) calc(30/750*100vw) calc(40/750*100vw) calc(10/750*100vw);
  }
  .usage-example-detail .example-top .ex-person-img {
    width: calc(170/750*100vw);
    flex-shrink: 0;
  }
  .usage-example-detail .example-top .example-txt p {
    font-size: calc(34/750*100vw);
    line-height: 1.4;
  }
  .usage-example-detail .example-top .example-txt .note-txt {
    font-size: calc(30/750*100vw);
    margin-top: calc(20/750*100vw);
  }
  .usage-example-detail .example-inner {
    padding: calc(50/750*100vw) calc(30/750*100vw) calc(30/750*100vw);
  }
  .usage-example-detail .example-inner .note-txt {
    margin-top: calc(30/750*100vw);
    font-size: calc(26/750*100vw);
  }
}

/** -----------------------------------
	ご利⽤条件について
---------------------------------------- ***/
.use-terms {
  padding: 110px 0 0;
}
.use-terms .disc-list {
  margin-top: 30px;
}
.use-terms .disc-list .disc {
  padding-left: 20px;
  position: relative;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .06em;
  color: #3F3F3F;
}
.use-terms .disc-list .disc::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  top: 0.7em;
  left: 0;
  background-color: #003d8b;
}
.use-terms .disc-list .disc .blue {
  font-size: 22px;
  line-height: 0;
  color: #003894;
}
@media screen and (max-width: 768px), print {
  .use-terms {
    padding-top: calc(120/750*100vw);
  }
  .use-terms .disc-list .disc {
    padding-left: calc(40/750*100vw);
    font-size: calc(34/750*100vw);
  }
  .use-terms .disc-list .disc::before {
    width: calc(16/750*100vw);
    height: calc(16/750*100vw);
    top: calc(26/750*100vw);
  }
  .use-terms .disc-list .disc .blue {
    font-size: calc(34/750*100vw);
  }
}

.add-terms {
  background-color: #f6f6f6;
  padding: 25px 50px 30px;
  margin-top: 25px;
}
.add-terms .add-terms-ttl {
  font-size: 22px;
  font-weight: 700;
  color: #303030;
  margin-bottom: 10px;
}
.add-terms .dot-list .dot {
  position: relative;
  padding-left: 21px;
  font-size: 18px;
}
.add-terms .dot-list .dot::before {
  content: "・";
  position: absolute;
  left: 0;
}
.add-terms .dot-list .dot:nth-child(n + 2) {
  margin-top: 8px;
}
.add-terms .note-txt {
  font-size: 16px;
  text-indent: -1em;
  padding-left: 1em;
  margin-top: 12px;
}
@media screen and (max-width: 768px), print {
  .add-terms {
    padding: calc(40/750*100vw) calc(50/750*100vw) calc(45/750*100vw);
    margin-top: calc(50/750*100vw);
  }
  .add-terms .add-terms-ttl {
    font-size: calc(34/750*100vw);
    margin-bottom: calc(20/750*100vw);
  }
  .add-terms .dot-list .dot {
    padding-left: calc(42/750*100vw);
    font-size: calc(30/750*100vw);
  }
  .add-terms .dot-list .dot:nth-child(n + 2) {
    margin-top: calc(15/750*100vw);
  }
  .add-terms .note-txt {
    font-size: calc(26/750*100vw);
    margin-top: calc(24/750*100vw);
  }
}

/** -----------------------------------
	使える商品のご案内
---------------------------------------- ***/
.info-product {
  padding: 120px 0 0;
}
@media screen and (max-width: 768px), print {
  .info-product {
    padding-top: calc(120/750*100vw);
  }
}

.info-product-ttl {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: .12em;
  margin: 30px 0 13px;
  padding-bottom: 8px;
  line-height: 1.5;
  border-bottom: 1px solid #cacaca;
  color: #303030;
}
@media screen and (max-width: 768px), print {
  .info-product-ttl {
    font-size: calc(40/750*100vw);
    margin: calc(50/750*100vw) 0 calc(30/750*100vw);
    padding-bottom: calc(16/750*100vw);
  }
}

.info-product-detail + .info-product-detail {
  margin-top: 70px;
}
.info-product-detail .product-area {
  display: flex;
  margin: 40px auto 0;
  gap: 50px;
  flex-wrap: wrap;
  width: 1000px;
  max-width: 100%;
}
.info-product-detail .product-item {
  width: calc((100% - 100px)/3);
}
.info-product-detail .product-item .product-img {
  margin-bottom: 12px;
  line-height: 0;
}
.info-product-detail .product-item .product-ttl {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: #303030;
}
@media screen and (min-width: 769px) and (max-width: 900px), print {
  .info-product-detail .product-item .product-ttl {
    font-size: 20px;
  }
}
.info-product-detail .product-item .product-txt {
  margin-top: 15px;
}
@media screen and (max-width: 768px), print {
  .info-product-detail + .info-product-detail {
    margin-top: calc(60/750*100vw);
  }
  .info-product-detail .product-area {
    margin-top: calc(60/750*100vw);
    justify-content: space-between;
    gap: calc(26/750*100vw);
  }
  .info-product-detail .product-item {
    width: 48%;
  }
  .info-product-detail .product-item .product-img {
    text-align: center;
  }
  .info-product-detail .product-item .product-ttl {
    font-size: calc(34/750*100vw);
    margin-bottom: 10px;
  }
}

/** -----------------------------------
	ご利⽤の⼿順について
---------------------------------------- ***/
.use-process {
  padding: 90px 0 0;
}
@media screen and (max-width: 768px), print {
  .use-process {
    padding-top: calc(120/750*100vw);
  }
}

.workflow-area {
  margin-top: 40px;
}
.workflow-area .workflow-box .workflow-ttl .icon-num {
  font-size: 60px;
  font-weight: 500;
}
.workflow-area .workflow-box .process-img {
  max-width: 150px;
  margin: -35px auto 15px;
}
.workflow-area .workflow-box .process-txt {
  text-align: center;
  font-weight: 700;
  color: #303030;
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.workflow-area .workflow-box .process-txt .note-txt {
  font-size: 16px;
  font-weight: 400;
}
@media screen and (max-width: 768px), print {
  .workflow-area {
    margin-top: calc(50/750*100vw);
  }
  .workflow-area .workflow-box .workflow-ttl .icon-num {
    font-size: calc(110/750*100vw);
  }
  .workflow-area .workflow-box .process-img {
    max-width: none;
    margin: 0;
    padding: 0;
    margin-top: 4.557vw;
  }
  .workflow-area .workflow-box .process-txt {
    font-size: calc(30/750*100vw);
  }
  .workflow-area .workflow-box .process-txt .note-txt {
    font-size: calc(25/750*100vw);
  }
  .workflow-area .workflow-box {
    display: grid;
    grid-template-columns: 15% 20% 65%;
    grid-template-rows: auto auto auto;
    width: 100%;
    max-width: 100%;
    padding: 10px 20px;
  }
}

/** -----------------------------------
	パンフレット
---------------------------------------- ***/
.pamphlet {
  padding: 55px 0 0;
}
.pamphlet .pamp-ttl {
  font-size: 25px;
  font-weight: 700;
  color: #303030;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 768px), print {
  .pamphlet {
    padding-top: calc(80/750*100vw);
  }
  .pamphlet .pamp-ttl {
    font-size: calc(38/750*100vw);
  }
}

.pamp-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cacaca;
  width: 800px;
  margin: 30px auto 0;
  padding: 23px;
}
.pamp-box .pamp-detail {
  margin-right: 70px;
}
.pamp-box .pamp-detail .pamp-detail-ttl {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #303030;
}
.pamp-box .pamp-detail .pamp-detail-txt {
  letter-spacing: .06em;
  margin-top: 12px;
}
.pamp-box .pamp-detail .btn.blue-line.dl {
  margin-top: 30px;
}
.pamp-box .pamp-detail .btn.blue-line.dl a {
  font-size: 18px;
  width: 230px;
  padding: 10px 8px;
}
.pamp-box .pamp-img {
  max-width: 169px;
  margin-right: 0;
}
@media screen and (max-width: 768px), print {
  .pamp-box {
    width: 100%;
    flex-direction: column;
    margin: calc(60/750*100vw) auto calc(80/750*100vw);
    padding: calc(50/750*100vw) calc(50/750*100vw) calc(60/750*100vw);
  }
  .pamp-box .pamp-detail {
    margin-right: 0;
  }
  .pamp-box .pamp-detail .pamp-detail-ttl {
    font-size: calc(42/750*100vw);
    line-height: 1.5;
  }
  .pamp-box .pamp-detail .pamp-detail-txt {
    margin-top: calc(24/750*100vw);
  }
  .pamp-box .pamp-detail .btn.blue-line.dl {
    margin-top: calc(60/750*100vw);
  }
  .pamp-box .pamp-detail .btn.blue-line.dl a {
    font-size: 3vw;
    width: 43.533vw;
    padding: 2.747vw 3.2vw 3.2vw 1.547vw;
  }
}
.pamp-box .pamp-img {
  max-width: 100%;
  width: calc(300/750*100vw);
  margin: calc(70/750*100vw) auto 0;
}
.pamp-box .pamp-img img{
  border: 1px solid #CACACA;
}
.attention {
  background-color: #f6f6f6;
  padding: 30px 50px 30px;
  margin-top: 70px;
}
.attention .attention-ttl {
  font-size: 22px;
  font-weight: 700;
  color: #303030;
  margin-bottom: 5px;
}
.attention .indent {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 16px;
}
@media screen and (max-width: 768px), print {
  .attention {
    padding: calc(40/750*100vw) calc(50/750*100vw) calc(45/750*100vw);
    margin-top: calc(100/750*100vw);
  }
  .attention .attention-ttl {
    font-size: calc(34/750*100vw);
  }
}

.member-services {
  padding: 90px 0 0;
}
@media screen and (max-width: 768px), print {
  .member-services {
    padding: calc(140/750*100vw) 0 calc(100/750*100vw);
  }
}