@charset "UTF-8";

/* ===============================================
    共通
=============================================== */
:root {
   --color-white: #ffffff;
   --color-brown: #573932;
   --color-red: #c2441a;
   --color-wine: #980000;
   --color-yellow-green: #d1e578;
   --color-yellow: #fbe19a;
   --color-bg-light: #fff6ee;
   --color-line: #e6d5c3;
   --color-line-gray: #e5e5e5;
   --color-line-gray-light: #eeeeee;

   --font-sans: 'Noto Sans JP', sans-serif;
   --font-size-base: 16px;
   --font-size-small: 15px;
   --font-weight-base: 500;
   --font-weight-bold: 700;
   --line-height-base: 1.7;
   --letter-spacing-base: .04em;
   --letter-spacing-wide: .08em;

   --width-content: 1000px;
   --width-box: 880px;
   --space-side: 20px;
   --space-section-block: 40px;
   --radius-8: 8px;
   --radius-12: 12px;

   --border-main-solid: 4px solid var(--color-red);
   --border-main-dashed: 4px dashed var(--color-red);
   --shadow-hover: 0 12px 24px rgba(87, 57, 50, 0.15);
   --shadow-box: 0 6px 24px rgba(87, 57, 50, 0.12);
   --hover-lift-y: -4px;
   --transition-base: 0.3s ease;
   --transition-hover: transform var(--transition-base), box-shadow var(--transition-base);

   --icon-external: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>');
   --icon-anchor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
}

html {
   text-size-adjust: 100%;
   scroll-behavior: smooth;
}

body {
   background-color: var(--color-white);
   margin: 0;
   overflow-x: hidden;
   min-width: inherit;
}

@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

#contents,
#contents *,
#contents *::before,
#contents *::after {
   box-sizing: border-box;
}

#contents h1,
#contents h2,
#contents h3,
#contents h4,
#contents p,
#contents figure,
#contents dl,
#contents dd {
   margin: 0;
   overflow-wrap: break-word;
}

#contents ul,
#contents ol {
   margin: 0;
   padding: 0;
   list-style: none;
}

#contents a {
   text-decoration: none;
   transition: color var(--transition-base), opacity var(--transition-base), background var(--transition-base);
}

#contents img {
   display: block;
   max-width: 100%;
   height: auto;
   vertical-align: bottom;
}

#contents {
   position: relative;
   font-family: var(--font-sans);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-base);
   font-feature-settings: "palt";
   line-height: var(--line-height-base);
   letter-spacing: var(--letter-spacing-base);
   color: var(--color-brown);
   overflow-x: hidden;
}

#present,
#how-to,
#tips,
#overview,
#block-06 {
   scroll-margin-top: 80px;
}

#contents h2.section-title {
   color: var(--color-red);
   font-size: clamp(22px, 2.5vw, 28px);
   font-weight: var(--font-weight-bold);
   text-align: center;
   margin: 50px 0 30px;
   letter-spacing: var(--letter-spacing-wide);
}

#contents h2.section-title:first-child {
   margin-top: 0;
}

#contents h3 {
   color: var(--color-red);
   font-weight: var(--font-weight-bold);
}

#contents .pc-only {
   display: none;
}

#contents .mt-40 {
   margin-top: 40px;
}

#contents .text-bold {
   font-weight: var(--font-weight-bold);
}

#contents .marker {
   background: linear-gradient(transparent 62%, var(--color-yellow) 62%);
   padding-inline: 0.1em;
}

#contents .text-center {
   text-align: center;
}

#contents .text-center-sp {
   text-align: center;
}

#contents .note {
   font-weight: var(--font-weight-base);
   font-size: var(--font-size-small);
}

#contents .small-text {
   font-size: var(--font-size-small);
   line-height: 1.5;
}

#contents .center-img {
   display: flex;
   justify-content: center;
   align-items: center;
}

#contents .link-text {
   color: var(--color-red);
   font-weight: var(--font-weight-bold);
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

#contents .link-text:hover {
   color: var(--color-brown);
}

#contents a[target="_blank"]:not(:empty)::after {
   content: "";
   display: inline-block;
   width: 0.9em;
   height: 1.3em;
   margin-inline: 0.1em;
   vertical-align: -0.3em;
   background-color: currentColor;
   -webkit-mask: var(--icon-external) no-repeat center / contain;
   mask: var(--icon-external) no-repeat center / contain;
}

#contents a[href^="#"]:not(.page-nav-link):not(:has(img))::after {
   content: "";
   display: inline-block;
   width: 0.9em;
   height: 0.9em;
   /* margin-left: 0.2em; */
   vertical-align: -0.1em;
   background-color: currentColor;
   -webkit-mask: var(--icon-anchor) no-repeat center / contain;
   mask: var(--icon-anchor) no-repeat center / contain;
}

#contents #page_top>a::after {
   display: none;
   content: none;
}

#contents .hover-lift {
   transition: var(--transition-hover);
}

#contents .hover-lift:hover {
   transform: translateY(var(--hover-lift-y));
   box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
   :root {
      --space-section-block: 50px;
   }

   #contents .pc-only {
      display: block;
   }

   #contents .text-center-sp {
      text-align: left;
   }
}

/* ===============================================
    モジュール / レイアウト・ボタン
=============================================== */
#contents .section-block {
   padding-block: var(--space-section-block);
}

#contents .section-inline {
   max-width: var(--width-content);
   margin-inline: auto;
   padding-inline: var(--space-side);
}

#contents .btn-wrap {
   display: flex;
   justify-content: center;
   margin-top: 24px;
}

#contents .page-button {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: 320px;
   padding: 14px 22px;
   border: 2px solid transparent;
   border-radius: var(--radius-8);
   font-size: 16px;
   font-weight: var(--font-weight-bold);
   text-align: center;
   cursor: pointer;
   transition: background 0.25s, border-color 0.25s, color 0.25s, var(--transition-hover);
}

#contents .page-button-wide {
   max-width: 440px;
}

#contents .page-button-primary {
   background-color: var(--color-wine);
   color: var(--color-white);
   border-color: var(--color-wine);
}

#contents .page-button-primary:hover {
   background-color: var(--color-white);
   color: var(--color-wine);
}

#contents .page-button-secondary {
   background-color: var(--color-white);
   color: var(--color-wine);
   border-color: var(--color-wine);
}

#contents .page-button-secondary:hover {
   background-color: var(--color-bg-light);
}

#contents .page-button-tertiary {
   background-color: var(--color-red);
   color: var(--color-white);
   border-color: var(--color-red);
}

#contents .page-button-tertiary:hover {
   background-color: var(--color-white);
   color: var(--color-red);
}

/* ===============================================
    section: キービジュアル
=============================================== */
#contents .kv {
   width: 100vw;
   margin-left: calc(50% - 50vw);
   background-color: var(--color-red);
   overflow: hidden;
}

#contents .kv-inner {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
}

#contents .kv-img {
   width: 100%;
}

/* ===============================================
    nav: ページ内ナビ
=============================================== */
#contents .page-nav {
   background-color: var(--color-wine);
   padding: 14px var(--space-side);
}

#contents .page-nav-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 8px 0;
}

#contents .page-nav-item {
   display: flex;
   align-items: center;
}

#contents .page-nav-link {
   display: inline-flex;
   align-items: center;
   padding: 0 14px;
   border-left: 1px solid var(--color-white);
   color: var(--color-white);
   font-size: 16px;
   font-weight: var(--font-weight-bold);
   transition: color var(--transition-base);
}

#contents .page-nav-item:last-child .page-nav-link {
   border-right: 1px solid var(--color-white);
}

#contents .page-nav-link:hover {
   color: var(--color-yellow);
}

@media (min-width: 768px) {
   #contents .page-nav {
      padding-block: 16px;
   }

   #contents .page-nav-link {
      padding-inline: 20px;
   }
}

/* ===============================================
    section: ご挨拶 (Xperia特別枠告知)
=============================================== */
#contents .section-greetings {
   padding-block: 40px;
   background-color: var(--color-white);
}

#contents .greetings-lead {
   text-align: center;
   font-weight: var(--font-weight-bold);
   font-size: clamp(16px, 1.8vw, 18px);
   margin-bottom: 20px;
}

#contents .greetings-box {
   max-width: var(--width-box);
   margin: 0 auto;
   padding: 16px 18px;
   background-color: var(--color-bg-light);
   border: var(--border-main-dashed);
   border-radius: var(--radius-8);
   text-align: center;
}

#contents .greetings-text {
   font-weight: var(--font-weight-bold);
   font-size: clamp(15px, 1.6vw, 16px);
   margin-bottom: 12px;
   line-height: 1.6;
}

@media (min-width: 768px) {
   #contents .greetings-box {
      padding: 18px 24px;
   }
}

/* ===============================================
    aside: CTAブロック
=============================================== */
#contents .cta-block {
   background-color: var(--color-bg-light);
   padding-block: 60px;
}

#contents .cta-box {
   width: min(100%, var(--width-box));
   margin-inline: auto;
   padding: 24px;
   background-color: var(--color-white);
   border-radius: var(--radius-12);
   box-shadow: var(--shadow-hover);
}

#contents h2.cta-tag {
   font-size: clamp(18px, 2vw, 22px);
   font-weight: var(--font-weight-bold);
   text-align: center;
   color: var(--color-red);
   padding-bottom: 16px;
   margin: 0;
}

#contents .cta-condition {
   margin-bottom: 24px;
}

#contents .cta-condition .section-lead {
   margin: 0 auto 8px;
   font-weight: var(--font-weight-bold);
}

#contents .cta-notice {
   font-size: var(--font-size-small);
}

#contents .cta-notice li {
   margin-bottom: 5px;
}

#contents #overview~.cta-block .cta-notice a[href^="#"]::after {
   transform: rotate(180deg);
}

#contents .page-button-list {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
}

@media (min-width: 768px) {
   #contents .cta-condition {
      text-align: center;
   }

   #contents .cta-condition .section-lead,
   #contents .cta-notice li {
      text-align: center;
   }

   #contents .page-button-list {
      flex-direction: row;
      justify-content: center;
   }
}

/* ===============================================
    section: プレゼント
=============================================== */
#contents .section-present {
   background: var(--color-white);
   padding-block: 60px;
}

#contents .info-box-outline {
   max-width: var(--width-box);
   margin-inline: auto;
   border: var(--border-main-solid);
   border-radius: var(--radius-12);
   padding: 24px;
   margin-bottom: 50px;
}

#contents .info-box-inner {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

#contents .info-box-inner .info-text {
   flex: 1;
}

#contents .info-box-inner .info-text p.text-bold {
   line-height: 1.6;
   margin-bottom: 1.2em;
}

#contents .btn-group-vertical {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 20px;
}

#contents .btn-group-vertical a[target="_blank"]::after,
#contents .btn-group-vertical a[href^="#"]::after {
   display: none;
   content: none;
}

#contents .info-box-inner .info-image {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
}

#contents .info-box-inner .info-image img {
   width: min(100%, 380px);
   object-fit: cover;
}

#contents .info-box-inner .info-image-border {
   border: 2px solid var(--color-line-gray);
   border-radius: var(--radius-12);
}

#contents .present-list-box {
   position: relative;
   max-width: var(--width-box);
   margin-inline: auto;
   margin-bottom: 50px;
   border: var(--border-main-solid);
   border-radius: var(--radius-12);
   padding: 20px 40px;
   background-color: var(--color-bg-light);
   box-shadow: var(--shadow-box);
   overflow: hidden;
}

#contents .present-list-box::before {
   content: "";
   position: absolute;
   right: -24px;
   bottom: -24px;
   width: 170px;
   height: 170px;
   background-color: var(--color-red);
   opacity: 0.07;
   -webkit-mask: url(../images/icon_present.svg) no-repeat center / contain;
   mask: url(../images/icon_present.svg) no-repeat center / contain;
   pointer-events: none;
}

#contents .present-list-box::after {
   content: "";
   position: absolute;
   left: -13px;
   top: -3px;
   width: 130px;
   height: 130px;
   background-color: var(--color-red);
   opacity: 0.07;
   transform: rotate(-20deg);
   -webkit-mask: url(../images/icon_present.svg) no-repeat center / contain;
   mask: url(../images/icon_present.svg) no-repeat center / contain;
   pointer-events: none;
}

#contents h3.present-list-header {
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
   column-gap: 0.6em;
   row-gap: 0.15em;
   align-items: center;
   justify-items: center;
   text-align: center;
   font-size: clamp(18px, 2vw, 22px);
   line-height: 1.4;
   width: 100%;
   margin-inline: auto;
   margin-bottom: 20px;
   padding: 10px 32px;
   color: var(--color-white);
   background: var(--color-red);
   clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}

#contents h3.present-list-header .present-count {
   grid-column: 1;
   grid-row: 2;
}

#contents .present-list-content {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 30px;
}

#contents .present-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
   align-items: stretch;
}

#contents .present-card {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 16px;
   padding: 10px 20px;
   background-color: var(--color-white);
   border: 2px solid var(--color-line);
   border-radius: var(--radius-12);
}

#contents .present-card-pay {
   position: relative;
}

#contents .present-item-title {
   font-size: 22px;
   font-weight: var(--font-weight-bold);
   margin-bottom: 8px;
   color: var(--color-brown);
}

#contents .present-logo {
   max-width: 140px;
   margin: 0 auto;
}

#contents .flex-row-inner {
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: center;
   justify-content: center;
}

#contents .flex-row-inner .item-text {
   flex: 1 1 auto;
   min-width: 0;
   text-align: center;
}

#contents .flex-row-inner .item-img {
   flex: 0 0 auto;
   width: 100%;
   max-width: 240px;
}

#contents .flex-row-inner .item-img img {
   width: 100%;
}

#contents .present-list-content.justify-center {
   justify-content: center;
   align-items: center;
}

#contents .present-item.single-card {
   width: 100%;
   max-width: 500px;
   margin: 0 auto;
}

#contents .notice-box-light {
   max-width: var(--width-box);
   margin-inline: auto;
   background-color: var(--color-bg-light);
   border: var(--border-main-dashed);
   border-radius: var(--radius-12);
   padding: 30px 20px;
   text-align: center;
   margin-top: 50px;
}

#contents .notice-box-light .notice-lead {
   color: var(--color-red);
   font-size: clamp(20px, 2.2vw, 24px);
   font-weight: var(--font-weight-bold);
   line-height: 1.5;
   margin-bottom: 20px;
}

#contents .notice-box-light .note-list {
   text-align: left;
   display: inline-block;
   font-size: var(--font-size-small);
   line-height: 1.6;
}

@media (min-width: 768px) {
   #contents .info-box-outline {
      padding: 32px 40px;
   }

   #contents .info-box-inner {
      flex-direction: row;
      align-items: center;
      gap: 40px;
   }

   #contents h3.present-list-header {
      grid-template-columns: auto auto auto;
      width: fit-content;
      padding: 8px 40px;
      line-height: 1.6;
   }

   #contents h3.present-list-header::before {
      content: "";
      grid-column: 1;
      grid-row: 1;
      width: 1.1em;
      height: 1.1em;
      background-color: currentColor;
      -webkit-mask: url(../images/icon_present.svg) no-repeat center / contain;
      mask: url(../images/icon_present.svg) no-repeat center / contain;
   }

   #contents h3.present-list-header .present-count {
      grid-column: 3;
      grid-row: 1;
   }

   #contents .present-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   #contents .flex-row-inner {
      flex-direction: row;
   }

   #contents .flex-row-inner .item-text {
      text-align: left;
   }

   #contents .flex-row-inner .item-img {
      flex: 0 0 45%;
      max-width: 200px;
   }

   #contents .flex-row-inner .item-img img {
      aspect-ratio: 5 / 6;
      object-fit: cover;
   }

   #contents .present-list-content.justify-center {
      flex-direction: row;
   }

   #contents .notice-box-light {
      padding: 40px;
   }
}

@media (min-width: 1024px) {
   #contents .present-card-pay {
      flex-direction: row;
      gap: 24px;
   }

   #contents .present-card-pay::after {
      content: "&";
      position: absolute;
      top: 50%;
      right: -15px;
      transform: translate(50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: var(--color-red);
      color: var(--color-white);
      font-size: 16px;
      font-weight: var(--font-weight-bold);
   }
}

/* ===============================================
    section: 応募方法
=============================================== */
#contents #how-to {
   background-color: var(--color-bg-light);
}

#contents .how-to-intro {
   text-align: center;
   margin-bottom: 40px;
}

#contents .how-to-intro p.text-bold {
   font-size: clamp(15px, 1.8vw, 18px);
   margin-bottom: 5px;
}

#contents .how-to-box-bg {
   max-width: var(--width-box);
   margin-inline: auto;
   background-color: var(--color-white);
   padding: 40px 20px;
   border: var(--border-main-solid);
   border-radius: var(--radius-12);
}

#contents h3.how-to-block-title {
   font-size: clamp(18px, 2vw, 22px);
   text-align: center;
   border-bottom: 2px dashed var(--color-red);
   padding-bottom: 12px;
   margin-bottom: 24px;
}

#contents .how-to-steps-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
}

#contents .how-to-step-card {
   width: 100%;
   background: var(--color-bg-light);
   border: var(--border-main-solid);
   border-radius: var(--radius-8);
   display: flex;
   flex-direction: column;
}

#contents .how-to-step-header {
   background: var(--color-red);
   color: var(--color-white);
   border-bottom: var(--border-main-solid);
   padding: 16px;
   text-align: center;
   font-weight: var(--font-weight-bold);
   font-size: clamp(15px, 1.6vw, 18px);
}

#contents .how-to-step-body {
   padding: 24px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

#contents .how-to-step-body p {
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-small);
   margin-bottom: 24px;
}

#contents .how-to-step-body img {
   margin-top: auto;
   width: 100%;
   object-fit: cover;
   border-radius: 4px;
   border: 2px solid var(--color-line-gray-light);
   background: var(--color-white);
   padding: 10px;
}

#contents .how-to-arrow-icon {
   width: 0;
   height: 0;
   margin: 15px auto;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 30px solid var(--color-brown);
}

#contents .how-to-note {
   text-align: center;
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-base);
   margin-top: 30px;
}

@media (min-width: 768px) {
   #contents .how-to-box-bg {
      padding: 50px 40px;
   }

   #contents .how-to-steps-wrap {
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
      gap: 30px;
   }

   #contents .how-to-step-card {
      flex: 1;
   }

   #contents .how-to-arrow-icon {
      margin: auto 0;
      border-top: 24px solid transparent;
      border-bottom: 24px solid transparent;
      border-left: 36px solid var(--color-red);
      border-right: none;
   }
}

/* ===============================================
    section: 撮影のコツ
=============================================== */
#contents .section-tips {
   background: var(--color-white);
}

#contents .section-tips .section-lead {
   margin-bottom: 30px;
   font-weight: var(--font-weight-bold);
}

#contents .tips-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
}

#contents .tips-link {
   display: block;
   border-radius: var(--radius-8);
   overflow: hidden;
   background-color: var(--color-white);
   transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
}

#contents .tips-link img {
   width: 100%;
   border-radius: inherit;
   transition: transform 0.4s ease;
}

#contents .tips-link:hover {
   opacity: 0.95;
   box-shadow: var(--shadow-hover);
}

#contents .tips-link:hover img {
   transform: scale(1.03);
}

#contents .tips-banner {
   margin-top: 24px;
   text-align: center;
}

#contents .tips-banner-link {
   display: inline-block;
   border-radius: var(--radius-8);
   overflow: hidden;
}

#contents .tips-banner-link img {
   transition: transform 0.4s ease;
}

#contents .tips-banner-link:hover img {
   transform: scale(1.02);
}

@media (min-width: 768px) {
   #contents .tips-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
   }

   #contents .tips-link,
   #contents .tips-banner-link {
      border-radius: var(--radius-12);
   }

   #contents .tips-banner {
      margin-top: 32px;
   }
}

/* ===============================================
    section: キャンペーン概要 (アコーディオン)
=============================================== */
#contents #overview {
   border-top: 4px solid var(--color-bg-light);
   padding: 60px 0;
}

#contents #overview .accordion {
   width: min(100%, var(--width-box));
   margin-inline: auto;
}

#contents #overview .accordion .toggle {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

#contents #overview .accordion .Label {
   display: block;
   position: relative;
   margin-bottom: 12px;
   padding: 14px 44px 14px 22px;
   color: var(--color-red);
   background: var(--color-bg-light);
   border: var(--border-main-solid);
   border-radius: var(--radius-8);
   font-size: clamp(16px, 1.8vw, 20px);
   font-weight: var(--font-weight-bold);
   text-align: center;
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s, border-radius 0.3s;
}

#contents #overview .accordion .Label:last-of-type {
   margin-bottom: 0;
}

#contents #overview .accordion .Label::before {
   content: "";
   position: absolute;
   top: 50%;
   right: 20px;
   width: 8px;
   height: 8px;
   border-top: 2px solid var(--color-red);
   border-right: 2px solid var(--color-red);
   transform: translateY(-50%) rotate(135deg);
   transition: transform 0.3s;
}

#contents #overview .accordion .toggle:checked+.Label {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   background-color: var(--color-white);
}

#contents #overview .accordion .toggle:checked+.Label::before {
   transform: translateY(-50%) rotate(-45deg);
}

#contents #overview .accordion .accordion-content {
   max-height: 0;
   margin: 0;
   overflow: hidden;
   color: var(--color-brown);
   background: var(--color-white);
   border: 4px solid transparent;
   border-top: none;
   border-bottom-left-radius: var(--radius-8);
   border-bottom-right-radius: var(--radius-8);
   font-size: var(--font-size-small);
   text-align: left;
   opacity: 0;
   transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

#contents #overview .accordion .toggle:checked+.Label+.accordion-content {
   max-height: 2600px;
   margin-block: -12px 12px;
   padding: 22px 18px 34px;
   border-color: var(--color-red);
   opacity: 1;
}

#contents #overview .accordion-content h3 {
   margin-top: 24px;
}

#contents #overview .accordion-content .icon-present::before {
   content: "";
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin-right: 0.4em;
   margin-bottom: 0.2em;
   vertical-align: text-bottom;
   background-color: var(--color-red);
   -webkit-mask: url(../images/icon_present.svg) no-repeat center / contain;
   mask: url(../images/icon_present.svg) no-repeat center / contain;
}

#contents #overview .accordion-content p,
#contents #overview .accordion-content ul {
   margin-bottom: 1.1em;
}

#contents #overview .accordion-content> :last-child {
   margin-bottom: 0;
}

#contents #overview .accordion-content li {
   position: relative;
   margin-bottom: .45em;
   padding-left: 1.45em;
}

#contents #overview .accordion-content li::before {
   content: "※";
   position: absolute;
   left: 0;
   top: 0;
   font-weight: var(--font-weight-bold);
}

#contents #overview .accordion-content .bullet-list li::before {
   content: "・";
}

#contents #overview .qa-list {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

#contents #overview .qa-item dt {
   display: flex;
   align-items: flex-start;
   color: var(--color-red);
   font-weight: var(--font-weight-bold);
   margin-bottom: 8px;
}

#contents #overview .qa-item dt::before {
   content: "Q";
   display: flex;
   justify-content: center;
   align-items: center;
   width: 22px;
   height: 22px;
   background-color: var(--color-red);
   color: var(--color-white);
   border-radius: 50%;
   margin-right: 8px;
   padding-bottom: 3px;
   font-size: 13px;
   flex-shrink: 0;
}

#contents #overview .qa-item dd {
   display: flex;
   align-items: flex-start;
   margin-bottom: 0;
   font-weight: var(--font-weight-base);
}

#contents #overview .qa-item dd::before {
   content: "A";
   display: flex;
   justify-content: center;
   align-items: center;
   width: 22px;
   height: 22px;
   background-color: var(--color-brown);
   color: var(--color-white);
   border-radius: 50%;
   margin-right: 8px;
   padding-bottom: 2.2px;
   font-size: 13px;
   flex-shrink: 0;
}

#contents #overview .xperia-model-list li {
   break-inside: avoid;
   padding-left: 0;
}

#contents #overview .xperia-model-list li::before {
   content: none;
}

@media (min-width: 768px) {
   #contents #overview .accordion .Label {
      padding: 14px 48px 14px 24px;
   }

   #contents #overview .accordion .Label::before {
      right: 24px;
      width: 10px;
      height: 10px;
   }

   #contents #overview .accordion .toggle:checked+.Label+.accordion-content {
      padding: 28px 44px 44px;
   }

   #contents #overview .xperia-model-list {
      column-count: 2;
      column-gap: 64px;
   }
}

/* ===============================================
    section: おすすめコンテンツ
=============================================== */
#contents #recommended {
   background: var(--color-white);
   border-top: 1px solid var(--color-line-gray);
}

#contents #recommended a[target="_blank"]::after,
#contents #recommended a[href^="#"]::after {
   display: none;
   content: none;
}