@charset "UTF-8";
.product_box {
  width: 100%;
  margin: 0 auto;
  font-size: 10px;
}
.product_box * {
  box-sizing: border-box;
}
.product_box img {
  max-width: 100%;
}
.product_block {
  position: relative;
}

/*ボタン*/
.product_block .btn-area {
  position: absolute;
  width: 100%;
}
.product_box .btn {
  color: #fff;
  border:solid 0.075em;
  background: #000;
  display: inline-block;
  line-height: 2.45em;
  border-radius: 1.625em;
  background-clip: padding-box;
  padding: 0 1.2em;
}
.product_box .btn:hover {
  text-decoration: none;
}

/*テキストリンク*/
.product_box .link-area .text-link i {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-top: 1px solid #06a;
  border-right: 1px solid #06a;
  transform: rotate(45deg);
  margin-top: -0.2em;
  margin-left: 0.3em;
  vertical-align: middle;
}
.product_box .link-area .text-link.text-link-w i {
  width: 0.7em;
  height: 0.7em;
  border: none;
  transform: none;
  background: url(/content/dam/au-com/extlib/a-common/images/icn-link-blank-blue-large.png ) 0 0 no-repeat;
  background-size: 100% auto;
}
.product_block [class^="link-"] {
    position: absolute;
}


@media screen and (min-width: 768px) {
  /*PC-ボタン*/
  .product_box .btn {
    font-size: clamp(12px, (100vw - 768px) * 4 / 212 + 12px, 16px);
  }
  /*PC-テキストリンク*/
  .product_box .text-link {
    font-size: clamp(12px, (100vw - 768px) * 3 / 212 + 12px, 15px);
  }

  /*PC-各画像の予約購入ボタン*/
  .block01 .btn-area {
    top: calc(965 / 1080 * 100%);
    text-align: center;
  }


  /*PC-比較エリアの予約購入ボタン位置*/
  .block04 .btn-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: calc(62 / 686 * 100%);
    padding: 0 calc(147 / 980 * 100%);
    top: calc(786 / 2429 * 100%);
    left: 0;
    text-align: center;
  }


  /*PC-テキストリンクエリア*/
  .block05 .link-band {
    top: calc(285 / 400 * 100%);
    left: calc(80 / 980 * 100%);
  }
  .block06 .link-area-applecare {
    top: calc(285 / 421 * 100%);
    left: calc(80 / 980 * 100%);
  }

}


@media screen and (min-width: 980px) {
  /*.product_box .btn {
    font-size: 16px;
    }
  .product_box .text-link {
    font-size: 12px;
    }*/
}


@media screen and (max-width: 767px) {
  /*SP-ボタン*/
  .product_box .btn {
    font-size: clamp(13px, (100vw - 320px) * 15 / 447 + 13px, 28px);
  }
  .product_box .block04 .btn {/*比較エリアの幅が極端に狭い場合*/
    font-size: clamp(10px, (100vw - 320px) * 10 / 447 + 10px, 20px);
    padding: 0 1em;
  }

  /*SP-テキストリンク*/
  .product_box .text-link {
    font-size: clamp(13px, (100vw - 320px) * 15 / 447 + 13px, 28px);
  }

  /*SP-各画像の予約購入ボタン*/
  .block01 .btn-area {
    width: 100%;
    text-align: center;
    top: calc(1283 / 1494 * 100%);
  }

  /*SP-比較エリアの予約購入ボタン位置*/
  .block04 .btn-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: calc(40 / 560 * 100%);
    padding: 0 calc(95 / 750 * 100%);
    top: calc(1332 / 5542 * 100%);
    left: 0;
    text-align: center;
  }
  .block0x .btn-area > div[class*="btn-"] {
    display: none;
  }
  .block0x .btn-area > div.btn-0x,
  .block0x .btn-area > div.btn-0x {
    display: block;
  }

  /*SP-テキストリンクエリア*/
  .block05 .link-band {
    top: calc(560 / 1098 * 100%);
    left: calc(136 / 750 * 100%);
  }
  .block06 .link-area-applecare {
    top: calc(605 / 1392 * 100%);
    left: calc(136 / 750 * 100%);
    padding-right: 14%;
  }
}
@media screen and (max-width: 320px) {
  /*.product_box .btn {
    font-size: 13px
  }*/
  .product_box .text-link {
    font-size: 12px;
  }
  .product_box .block04 .btn {/*幅が極端に狭い場合*/
    padding: 0 0.5em;
  }
}


/*---------------------------------
 product-main-footer
---------------------------------*/
.product-main-footer {
    background-color: #f0f0f0;
    font-size: 12px;
    color: #777;
}
@media print, (min-width: 768px) {
  .product-main-footer {
    padding: 2%;
  }
}
@media screen and (max-width:767px) {
  .product-main-footer {
    padding: 20px 4%;
  }
}

@media screen and (min-width: 768px) {
	.hidden-pc { display: none !important; }
}

@media screen and (max-width: 767px) {
	.hidden-sp { display: none!important; }
}