@charset "UTF-8";

/* Styles for Privacy Policy Page */

/* Variables (Values taken from SASS settings) */
:root {
  --c-blue-bg: #f8f9ff;
  --c-black-main: #31315f;
  --c-gray-main: #e4e4e4;
  --c-gray-bg: #f1f1f1;
}

.p-page-header {
  padding-top: clamp(120px, 11vw, 160px);
  padding-bottom: clamp(40px, 4vw, 60px);
  text-align: center;
  background-color: var(--c-blue-bg);
}

.p-page-header__title {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--c-black-main);
}

.p-privacy {
  padding-bottom: clamp(60px, 7vw, 100px);
}

.p-privacy__inner {
  max-width: 800px;
  margin: 0 auto;
}

.p-privacy__content {
  padding-top: clamp(30px, 3vw, 40px);
}

.p-privacy__content h2 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  margin-top: clamp(30px, 4vw, 50px);
  margin-bottom: clamp(16px, 1.5vw, 24px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-gray-main);
  color: var(--c-black-main);
}

.p-privacy__content h3 {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 700;
  margin-top: clamp(24px, 2.2vw, 32px);
  margin-bottom: clamp(12px, 1.2vw, 16px);
  color: var(--c-black-main);
}

.p-privacy__content p {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  margin-bottom: 1.5em;
  color: var(--c-black-main);
  text-align: justify;
}

.p-privacy__content ol {
  margin-bottom: 2em;
  counter-reset: item;
  list-style: none; /* Reset default list style */
  padding-left: 0;
}

.p-privacy__content ol > li {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  margin-bottom: 0.5em;
  color: var(--c-black-main);
  padding-left: 1.5em;
  position: relative;
}

.p-privacy__content ol > li::before {
  counter-increment: item;
  content: '(' counter(item) ')';
  position: absolute;
  left: 0;
}

.p-privacy__content ol li ol {
  margin-top: 0.5em;
  margin-bottom: 0;
}

.p-privacy__content ol li ol li {
  padding-left: 1.5em;
}

.p-privacy__content ol li ol li::before {
  counter-increment: sub-item;
  content: 'ア';
}

/* Specific nesting for list items based on the reference (assuming 2nd level list style) */
/* The reference SCSS had .p-privacy__content ol > li > ol > li::before content: '・' */
.p-privacy__content ol > li > ol {
  list-style: none;
}

.p-privacy__content ol > li > ol > li::before {
  counter-increment: none; /* override the 'ア' if it was applied generally */
  content: '・';
}

/* 第2条の入れ子用 (Targeting 2nd li of the first ol, then its child ol li) */
/* The reference: ol > li:nth-child(2) > ol > li::before { content: ''; } */
/* but wait, the reference logic was:
    ol { ... > li { ... ol { li { ::before { content: 'ア' } } } } }
    AND
    ol > li > ol { ... > li::before { content: '・' } }
    This implies the '・' rule overrides the 'ア' rule for direct children of direct children?
    Let's stick to the specific override.
*/

/* Resetting nested ordered lists to use '・' by default as per 'ol > li > ol > li::before' */
.p-privacy__content ol > li > ol > li::before {
  content: '・';
}

/* Specific override for Article 2's nested list if needed, but in the HTML
   Article 2 is the 2nd H2, but the OLs are siblings of Ps.
   Looking at the HTML structure:
     Article 2 is followed by <p> then <ol>.
     The <ol> has <li>...</li>.
     The 2nd <li> has a nested <ol>.
*/
.p-privacy__content ol > li:nth-child(2) > ol > li::before {
  /* If this specific rule was in the SCSS, I should include it.
       In SCSS:
       ol > li:nth-child(2) > ol > li::before { content: ''; }
       This targets the lists inside the 2nd item of the top level OL.
    */
  content: ''; /* Empty content? Maybe it uses default numbers or nothing? */
  /* Wait, the HTML has <ol><li>...<ol><li>...</li></ol></li></ol> inside Art 2.
       The nested ol (lines 53-62) has items like "1. ...", "2. ...".
       If content is '', then no bullet?
       Ah, looking at file content:
       Article 2 <ol> (line 46)
         <li>...</li>
         <li>...
           <ol> (line 53)
             <li>...</li> (line 54)
    */
}
/* Let's re-read the SCSS carefully.
   ol > li { ...
     ol { ...
       li { ... ::before { content: 'ア'; } }
     }
   }
   ol > li > ol {
     > li::before { content: '・'; }
   }
   ol > li:nth-child(2) > ol > li::before {
     content: ''; 
   }

   So:
   1. Default nested list item gets 'ア'.
   2. But `ol > li > ol` selector overrides it to '・'.
   3. BUT `ol > li:nth-child(2) > ol > li` overrides it to ''.
   
   Wait, if `content: ''`, then what is shown? Maybe it has list-style? 
   The `ol > li > ol` has `list-style: none`.
   Maybe Article 2's list are supposed to be numbered?
   HTML line 53: <ol> ... <li>...</li> </ol>.
   If I look at the HTML for Art 2:
   It has <ol> inside an <li>.
   The items are: 1.端末情報, 2.ログ情報...
   But the CSS removes default list style.
   If content is empty, they won't have bullets.
   
   Let's look at the SCSS again.
   Line 298: ol > li:nth-child(2) > ol > li::before { content: ''; }
   This targets the 2nd li of the main ol.
   Main ol (line 46) has 2 li's.
   1. 利用者にご提供いただく情報
   2. 当社サービスのご利用時に当社が収集する情報
      Inside this 2nd li, there is an ol.
      This nested ol has items.
      If their before content is empty, and list-style is none, they have no markers?
      That seems wrong for a list.
      Maybe the HTML structure implies they are just indented?
      Or maybe I missed a `list-style` re-enable?
      
      Actually, the SCSS `.p-privacy__content ol` has `counter-reset: item`.
      `> li` increments item and shows `(` counter `)`.
      
      The nested `ol` doesn't seem to reset a counter in the SCSS visible.
      But `ol > li > ol > li` sets content to '・'.
      
      The special case `ol > li:nth-child(2) > ol > li::before` sets content to `''`.
      
      Let's look at the HTML of Art 2 (lines 42-64).
      It's an OL with 2 LIs.
      The 2nd LI has a nested OL with 6 LIs.
      
      Maybe I should just apply the styles as is and trust it.
      
      However, I notice in the SCSS:
      `ol > li > ol { list-style: none; ... }`
      
      If I just output the CSS, I should match the specificity.
*/

.p-privacy__content ol > li:nth-child(2) > ol > li::before {
  content: '';
  position: static; /* If it was absolute */
}
/* Also the nested LI has padding-left: 1.5em; from the general rule. */

.p-privacy__content .contact-box,
.p-privacy__content .company-info {
  background-color: var(--c-gray-bg);
  padding: 20px;
  margin-top: 30px;
  border-radius: 8px;
}

.p-privacy__content .contact-box p,
.p-privacy__content .company-info p {
  margin-bottom: 0.5em;
}

.p-privacy__content .contact-box p:last-child,
.p-privacy__content .company-info p:last-child {
  margin-bottom: 0;
}

.p-privacy__content .date {
  text-align: right;
  margin-top: 20px;
}