@charset "UTF-8";
.product_box {
  /* ---- variables: SP ---- */
  --heading-l:  6.18vw;
  --heading:     5.29vw;
  --fs-hero:     7.06vw;
  --fs-text-l:   5.29vw;
  --fs-text:     3.82vw;
  --fs-text-s:   2.94vw;
  --fs-button:   4.12vw;
  --fs-bold: 600;

  /* ---- colors ---- */
  /* 基準色（同じ色を複数の役割で使う場合はここを参照してまとめる） */
  --color-dark:       #1d1d1f;
  --color-white:      #ffffff;
  --color-whitesmoke: #f5f5f7;
  --color-gray:       #6e6e73;
  --color-hero:       #f5f5f7;
  background: var(--color-white);
  color: var(--color-dark);
}

/* ---- variables: PC ---- */
@media (min-width: 768px) {
  .product_box {
    --heading-l: clamp(24px, calc(24px + 8 * ((100vw - 768px) / 212)), 32px);
    --heading:  clamp(14px, calc(14px + 6 * ((100vw - 768px) / 212)), 20px);
    --fs-hero:     clamp(46px, calc(46px + 18 * ((100vw - 768px) / 212)), 64px);
    --fs-text-l:   clamp(19px, calc(19px + 7 * ((100vw - 768px) / 212)), 26px);
    --fs-text:     clamp(11px, calc(11px + 4 * ((100vw - 768px) / 212)), 15px);
    --fs-text-s:   clamp(9px, calc(9px + 3 * ((100vw - 768px) / 212)), 12px);
    --fs-button:   clamp(14px, calc(14px + 4 * ((100vw - 768px) / 212)), 18px);
    --fs-bold: 700;
  }
}

/* テキスト */
.product_box .text {
  font-size: var(--fs-text);
  line-height: 1.7;
}
.product_box .feature__title {
  font-size: var(--fs-text-l);
  font-weight: var(--fs-bold);
  line-height: 1.3;
}
.product_box .feature__lead {
  font-size: var(--fs-text-s);
  font-weight: bold;
  color: var(--color-gray);
  line-height: 1.7;
}
.product_box .feature__lead strong {
  color: var(--color-whitesmoke);
}
.product_box .feature-stats__caption {
  font-size: var(--fs-text-s);
  color: var(--color-gray);
}
@media (max-width: 767px) {
  .product_box .feature-stats__caption {
    line-height: 1.5;
  }
}
.product_box .feature-stats__caption strong {
  font-size: var(--fs-text);
  color: var(--color-dark);
}

/* ---- section bg ---- */
.product_box .section--light {
  background: var(--color-white);
  color: var(--color-dark);
}
.product_box .section--light .panel {
  background: var(--color-whitesmoke);
}
.product_box .section--light-gray {
  background: var(--color-whitesmoke);
  color: var(--color-text);
}
.product_box .section--light-gray .panel {
  background: var(--color-white);
}

/* ---- layout helpers ---- */
.product_box h2, .product_box h3, .product_box h4, .product_box h5 {
  margin:0;
  font-feature-settings: "palt";
}
.product_box p {
  font-feature-settings: "palt";
}
.product_box ul {
  padding:0;
}
.product_box .section {
  width: 100%;
  text-align: center;
  position: relative;
}

.product_box .panel {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.product_box .feature-stats {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
}
.product_box .panel-grid {
  display: grid;
  gap: 5.01vw;
}
@media (min-width: 768px) {
  .product_box .panel-grid {
    gap: clamp(13px, 1.76vw, 18px);
  }
}
.product_box .panel-grid--2 {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .product_box .panel-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.product_box .panel-media {
  display: block;
}
@media (min-width: 768px) {
  .product_box .panel-media {
    display: flex;
  }
}
/* ---- image（画像プレースホルダー／picture要素どちらにも対応） ---- */
.product_box .image {
  width: 100%;
  display: block;
}
.product_box img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- link ---- */
.product_box .link {
  font-size: var(--fs-text);
}
@media (min-width: 768px) {
  .product_box .link {
    font-size: var(--fs-text);
  }
}
.product_box .link::after {
  content: "";
  display: inline-block;
}
.product_box .link--arrow::after{
  width: 0.5em;
  height: 0.5em;
  margin: 0 0 0.1em 0.2em;
  border-top: 2px solid #06a;
  border-right: 2px solid #06a;
  transform: rotate(45deg);
}
.product_box .link--blank::after {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.2em;
  background: url(/content/dam/au-com/extlib/a-common/images/icn-link-blank-blue-large.png) 0 0 no-repeat;
  background-size: contain;
}

/* ---- button ---- */
.product_box .cta__button {
  display: inline-block;
  border: 1px solid var(--color-dark);
  border-radius: 999px;
  padding: .5em 1.2em;
  font-size: var(--fs-button);
  color: var(--color-dark);
  text-decoration: none;
}

/* ---- hero ---- */
.product_box .section-hero {
  background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-hero) 100%);
  color: var(--color-dark);
  text-align: center;
}
.product_box .hero__title {
  font-size: var(--fs-hero);
  font-weight: bold;
}
.product_box .hero__promo-text {
  font-size: var(--fs-text-s);
}
.product_box .hero__title--eyebrow {
  display: block;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .product_box .section-hero {
    padding: 15.67vw 0 0 0;
  }
  .product_box .section-hero .hero__title {
    margin: 0 0 18.8vw 0;
  }
  .product_box .hero__title--eyebrow {
    margin: 0 auto 1.25vw auto;
    width: 28.58vw;
  }
  .product_box .section-hero .image {
    margin: 9.27vw 0 0 0;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .product_box .section-hero {
    padding: clamp(69px, 9.02vw, 94px) 0 0 0;
  }
  .product_box .section-hero .hero__title {
    margin: 0 0 clamp(62px, 8.14vw, 84px) 0;
  }
  .product_box .hero__title--eyebrow {
    width: clamp(176px, 23.02vw, 239px);
  }
  .product_box .section-hero .image {
    margin: clamp(33px, 4.4vw, 45px) 0 0 0;
    width: 100%;
  }
}

/* ---- 特長：section-feature ---- */
.product_box .section-feature {
  display: flex;
  flex-wrap: wrap;
}
.product_box .section-feature .feature-stats__caption {
  text-align: left;
}
@media (max-width: 767px) {
  .product_box .section-feature {
    padding: 5.01vw 6.89vw 6.89vw 6.89vw;
    gap: 5.01vw 0;
  }
  .product_box .section-feature section {
    padding-top: 10.03vw;
  }
}

@media (min-width: 768px) {
  .product_box .section-feature {
    padding: clamp(37px, 4.84vw, 50px) clamp(29px, 3.87vw, 40px) 0 clamp(29px, 3.87vw, 40px);
    gap: clamp(13px, 1.76vw, 18px);
  }
  .product_box .section-feature section {
    padding-top: clamp(32px, 4.18vw, 43px);
  }
}


/* ---- ディスプレイ訴求 ---- */
@media (max-width: 767px) {
  .product_box .section-display .image {
    margin: 7.52vw auto 9.78vw auto;
    width: 68.43vw;
  }
}
@media (min-width: 768px) {
  .product_box .section-display .image {
    margin: clamp(27px, 3.52vw, 36px) auto clamp(33px, 4.4vw, 45px) auto;
    width: clamp(421px, 54.92vw, 572px);
  }
}

/* ---- iOS訴求 ---- */
@media (max-width: 767px) {
  .product_box .section-ios .image {
    margin: 8.52vw auto 11.15vw auto;
    width: 56.4vw;
  }
}
@media (min-width: 768px) {
  .product_box .section-ios .image {
    margin: clamp(28px, 3.74vw, 38px) auto clamp(38px, 4.97vw, 51px) auto;
    width: clamp(611px, 79.57vw, 829px);
  }
}

/* ---- カメラ訴求 ---- */
@media (max-width: 767px) {
  .product_box .section-camera .image {
    margin: 6.27vw auto 0 auto;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .product_box .section-camera {
    width: calc((100% - clamp(13px, 1.76vw, 18px)) / 2);
  }
  .product_box .section-camera .image {
    margin: clamp(33px, 4.31vw, 44px) 0 0 0;
    width: 100%;
  }
}

/* ---- チップ訴求 ---- */
@media (max-width: 767px) {
  .product_box .section-chip .image {
    margin: 9.02vw auto 11.28vw auto;
    width: 39.1vw;
  }
  .product_box .section-chip .feature-stats {
    margin: 0 0 10.03vw 9.4vw;
  }
  .product_box .section-chip .feature-stats__item {
    width: 32.59vw;
  }
}
@media (min-width: 768px) {
  .product_box .section-chip {
    width: calc((100% - clamp(13px, 1.76vw, 18px)) / 2);
  }
  .product_box .section-chip .image {
    margin: clamp(4px, 0.62vw, 6px) auto clamp(28px, 3.74vw, 38px) auto;
    width: clamp(164px, 21.39vw, 222px);
  }
  .product_box .section-chip .feature-stats {
    margin: 0 0 clamp(30px, 3.96vw, 41px) clamp(47px, 6.16vw, 64px);
  }
}

/* ---- バッテリー訴求 ---- */
@media (max-width: 767px) {
  .product_box .section-battery .image {
    width: 69.43vw;
    position: absolute;
    right: 0;
    top: 36.35vw;
  }
  .product_box .section-battery .feature-stats {
    margin: 67.05vw 10.03vw 9.27vw 9.4vw;
  }
  .product_box .section-battery .feature-stats__item {
    width: 32.59vw;
  }
  .product_box .section-battery .feature-stats__item:first-child {
    padding-top: 1em;
  }
}
@media (min-width: 768px) {
  .product_box .section-feature .section-battery {
    padding: clamp(21px, 2.86vw, 29px) 0 clamp(39px, 5.15vw, 53px) 0;
    text-align: left;
  }
  .product_box .section-battery.panel-media {
    justify-content: space-between;
  }
  .product_box .section-battery .image {
    width: clamp(427px, 55.67vw, 580px);
  }
  .product_box .section-battery .panel-media__contents {
    padding: clamp(57px, 7.48vw, 77px) 0 0 clamp(39px, 5.19vw, 54px);

  }
  .product_box .section-battery .feature-stats {
    margin: clamp(23px, 3.08vw, 32px) 0 0 0;
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(11px, 1.54vw, 16px);
  }
}


/* ---- フレーム訴求 ---- */
@media (max-width: 767px) {
  .product_box .section-frame .image {
    margin: 7.52vw auto 0 auto;
    width: 70.19vw;
  }
}

@media (min-width: 768px) {
  .product_box .section-frame {
    width: calc((100% - clamp(13px, 1.76vw, 18px)) / 2);
  }
  .product_box .section-frame .image {
    margin: clamp(27px, 3.52vw, 36px) auto 0 auto;
    width: clamp(242px, 31.6vw, 329px);
  }
}

/* ---- siri訴求 ---- */
.product_box .section-siri .feature__title--bg {
  background-size: auto 80%;
  background-position: left bottom;
  background-clip: text;
  color: transparent;
}
@media (max-width: 767px) {
  .product_box .section-siri .feature__lead {
    margin: 3.13vw 0 0 0;
  }
  .product_box .section-siri .image {
    margin: 7.52vw auto 0 auto;
    width: 65.55vw;
  }
  .product_box .section-siri .feature__title--bg01 {
    background-image: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/sp/bg_title_siri_01_b6906d35f5c175f2.jpg);
  }
  .product_box .section-siri .feature__title--bg02 {
    background-image: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/sp/bg_title_siri_02_ff3a0ec7ca79a4dd.jpg);
  }
  .product_box .section-siri .feature__title--bg03 {
    background-image: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/sp/bg_title_siri_03_29adbe31c3945a13.jpg);
  }
  .product_box .section-siri .feature__title--bg04 {
    background-image: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/sp/bg_title_siri_04_2a12ffdcf5ede3ae.jpg);
  }
}
@media (min-width: 768px) {
  .product_box .section-siri {
    width: calc((100% - clamp(13px, 1.76vw, 18px)) / 2);
  }
  .product_box .section-siri .feature__lead {
    margin: clamp(13px, 1.76vw, 18px) 0 0 0;
  }
  .product_box .section-siri .image {
    margin: clamp(23px, 3.08vw, 32px) auto 0 auto;
    width: clamp(235px, 30.63vw, 319px);
  }
  .product_box .section-siri .feature__title--bg01 {
    background-image: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/bg_title_siri_01_af37893d79625c1c.jpg);
  }
  .product_box .section-siri .feature__title--bg02 {
    background-image: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/bg_title_siri_02_7e7ac8b7304a66d3.jpg);
  }
  .product_box .section-siri .feature__title--bg03 {
    background-image: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/bg_title_siri_03_62ebd84c829ff29f.jpg);
  }
}
/* ---- iPhoneケース訴求 ---- */
@media (max-width: 767px) {
  .product_box .section-phone-case .image {
    margin: 7.52vw auto 10.03vw auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .product_box .section-phone-case .image {
    margin:clamp(30px, 3.96vw, 41px) auto clamp(32px, 4.27vw, 44px) auto;
    width: clamp(464px, 60.47vw, 630px)
  }
}

/* ---- 地球と、あなたと／アップグレード ---- */
.product_box .section-sustainability h3,
.product_box .section-switch h3 {
  font-size: var(--heading-l);
  line-height: 1.3;
}
.product_box .section-sustainability h4,
.product_box .section-switch h4 {
  font-size: var(--heading);
}
.product_box .section-sustainability h4::before,
.product_box .section-switch h4::before {
  content: "";
  display: block;
}
.product_box .section-sustainability .panel-privacy h4::before {
  background: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/icon_privacy_67030e56748d4406.jpg) 0 0 no-repeat;
  background-size: contain;
}
.product_box .section-sustainability .panel-recycling h4::before {
  background: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/icon_recycling_daba4e2e95b72773.jpg) 0 0 no-repeat;
  background-size: contain;
}
.product_box .section-switch .panel-migration h4::before {
  background: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/icon_migration_f6a199fd587aef69.jpg) 0 0 no-repeat;
  background-size: contain;
}
.product_box .section-switch .panel-switch h4::before {
  background: url(/content/dam/au-com/extlib/iphone/product/iphone-duo/images/2610/icon_switch_df06e2cfbf98e9cc.jpg) 0 0 no-repeat;
  background-size: contain;
}

@media (max-width: 767px) {
  .product_box .section-sustainability,
  .product_box .section-switch {
    padding: 15.04vw 6.89vw 0 6.89vw;
    text-align: left;
  }
  .product_box .section-switch {
    padding-bottom: 10.4vw;
  }
  .product_box .section-sustainability h3,
  .product_box .section-switch h3 {
    margin: 0 0 10.65vw 4.39vw;
  }
  .product_box .section-sustainability h4,
  .product_box .section-switch h4 {
    margin: 0 0 .5em 0;
  }
  .product_box .section-sustainability h4::before,
  .product_box .section-switch h4::before {
    margin: 0 0 .5em 0;
  }
  .product_box .section-sustainability .panel,
  .product_box .section-switch .panel{
    padding: 10.53vw 0 8.15vw 10.65vw;
  }
  .product_box .section-sustainability .panel-privacy h4::before {
    width:8.02vw;
    height: 10.9vw;
  }
  .product_box .section-sustainability .panel-recycling h4::before {
    width: 10.03vw;
    height: 9.78vw;
  }
  .product_box .section-switch .panel-migration h4::before {
    width: 8.02vw;
    height: 11.53vw;
  }
  .product_box .section-switch .panel-switch h4::before {
    width: 11.78vw;
    height: 9.02vw;
  }
}
@media (min-width: 768px) {
  .product_box .section-sustainability,
  .product_box .section-switch {
    padding: clamp(67px, 8.8vw, 91px) clamp(29px, 3.87vw, 40px) 0 clamp(29px, 3.87vw, 40px);
  }
  .product_box .section-switch {
    padding-bottom: clamp(31px, 4.09vw, 42px);
  }
  .product_box .section-sustainability h3,
  .product_box .section-switch h3 {
    margin: 0 0 clamp(35px, 4.62vw, 48px) 0;
  }
  .product_box .section-sustainability .panel {
    padding-top: clamp(25px, 3.3vw, 34px);
    padding-bottom: clamp(54px, 7.04vw, 73px);
  }
  .product_box .section-switch .panel{
    padding-top: clamp(38px, 5.06vw, 52px);
    padding-bottom: clamp(33px, 4.4vw, 45px);
  }
  .product_box .section-sustainability .panel-privacy h4::before {
    margin: 0 auto clamp(21px, 2.86vw, 29px) auto;
    width: clamp(21px, 2.81vw, 29px);
    height: clamp(29px, 3.83vw, 39px);
  }
  .product_box .section-sustainability .panel-recycling h4::before {
    margin: clamp(5px, 0.75vw, 7px) auto clamp(20px, 2.64vw, 27px) auto;
    width: clamp(27px, 3.52vw, 36px);
    height: clamp(26px, 3.43vw, 35px);
  }
  .product_box .section-switch .panel-migration h4::before {
    margin: 0 auto clamp(15px, 1.98vw, 20px) auto;
    width: clamp(21px, 2.81vw, 29px);
    height: clamp(31px, 4.04vw, 42px);
  }
  .product_box .section-switch .panel-switch h4::before {
    margin: clamp(4px, 0.62vw, 6px) auto clamp(16px, 2.2vw, 22px) auto;
    width: clamp(31px, 4.13vw, 43px);
    height: clamp(24px, 3.17vw, 33px);
  }
}

/* ---- さらなる魅力を。 ---- */
.product_box .section-more h3 {
  font-size: var(--heading-l);
}
.product_box .section-more h5 {
  font-size: var(--heading-l);
}
.product_box .section-more .link {
  margin: .8rem 0 0 0;
}
@media (max-width: 767px) {
  .product_box .section-more {
    padding: 14.41vw 6.89vw 6.27vw 6.89vw;
  }
  .product_box .section-more h3 {
    margin: 0 0 8.77vw 4.39vw;
  }
  .product_box .section-more h4 {
    margin-bottom: .3rem;
  }
  .product_box .section-more h5 {
    margin-bottom: .8rem;
  }
  .product_box .section-more .section {
    margin-top: 6.27vw;
    text-align: left;
  }
  .product_box .section-more .panel-media__content {
    padding: 9.65vw 0 0 10.65vw;
  }
  /* ---- Apple Music ---- */
  .product_box .section--applemusic h4 {
    width: 16.92vw;
  }
  .product_box .section--applemusic .image {
    margin: 8.52vw auto 10.03vw auto;
    width: 58.66vw;
  }
  /* ---- Apple One ---- */
  .product_box .section--appleone h4 {
    width: 12.53vw;
  }
  .product_box .section--appleone .image {
    margin: 8.52vw auto 10.03vw auto;
    width: 58.66vw;
  }
  /* ---- Apple Care ---- */
  .product_box .section--applecare h4 {
    width: 15.54vw;
  }
  .product_box .section--applecare .image {
    margin: 11.91vw auto 12.41vw auto;
    width: 58.78vw;
  }
  /* ---- Apple Watch ---- */
  .product_box .section--applewatch .image {
    margin: 11.66vw auto 11.66vw auto;
    width: 56.15vw;
  }
}
@media (min-width: 768px) {
  .product_box .section-more {
    padding: clamp(69px, 9.01vw, 93px) clamp(29px, 3.87vw, 40px) clamp(13px, 1.76vw, 18px)
 clamp(29px, 3.87vw, 40px);
    text-align: center;
  }
  .product_box .section-more h3 {
    margin: 0 0 clamp(33px, 4.4vw, 45px) 0;
  }
  .product_box .section-more h4 {
    margin-bottom: .25rem;
  }
  .product_box .section-more h5 {
    margin-bottom: .8rem;
    line-height: 1.3;
  }
  .product_box .section-more .text {
    line-height: 1.5;
  }
  .product_box .section-more .section {
    margin-top: clamp(13px, 1.76vw, 18px);
  }
  .product_box .section-more .panel-media {
    padding: clamp(32px, 4.26vw, 44px) 0;
    display: flex;
    text-align: left;
    align-items: center;
  }
  .product_box .section-more .panel-media__content {
    padding-left: clamp(27px, 3.61vw, 37px);
  }
  /* ---- iPhone アクセリ ---- */
  .product_box .section--accessory .panel-media {
    padding-top: clamp(43px, 5.72vw, 59px);
    padding-bottom: 0;
  }
  .product_box .section--accessory .panel-media__content {
    padding-bottom: clamp(32px, 4.26vw, 44px);
    flex-basis: auto;
    flex-grow: 1;
  }
  .product_box .section--accessory .image {
    width: clamp(353px, 45.99vw, 479px);
  }
  /* ---- Apple Music ---- */
  .product_box .section--applemusic h4 {
    width:clamp(47px, 6.16vw, 64px);
    margin-bottom: .6em;
  }
  .product_box .section--applemusic .panel-media__content {
    flex-basis:  59.1836734694%;
  }
  .product_box .section--applemusic .image {
    width:clamp(214px, 27.87vw, 290px);
  }
  /* ---- Apple One ---- */
  .product_box .section--appleone h4 {
    width:clamp(34px, 4.53vw, 47px);
    margin-bottom: .6em;
  }
  .product_box .section--appleone .panel-media {
    padding: clamp(27px, 3.55vw, 37px) 0;
  }
 .product_box .section--appleone .panel-media__content {
    flex-basis:  57.8571428571%;
  }
  .product_box .section--appleone .image {
    width:clamp(230px, 30.03vw, 313px);
  }
  /* ---- Apple Care ---- */
  .product_box .section--applecare h4 {
    width:clamp(44px, 5.8vw, 60px);
    margin-bottom: .6em;
  }
  .product_box .section--applecare .image {
    width: clamp(250px, 32.61vw, 339px);
  }
  .product_box .section--applecare .panel-media {
    padding:clamp(42px, 5.59vw, 58px) 0;
  }
 .product_box .section--applecare .panel-media__content {
    flex-basis:  53.010204081%;
  }
}

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