@charset "utf-8";
body {
  color: #3c3c3c;
}


.breadcrumb-001 {
    width: clamp(200px, 75%, 1100px);
    display: flex;
    gap: 0 1.5vw;
    list-style: none;
    padding: 0;
    margin: 3vw auto 0vw;
    font-size: clamp(6px, 1.4vw, 18px);
    font-weight: 500;
    align-items: center;
}

.breadcrumb-001 li {
    display: flex;
    align-items: center;
}

.breadcrumb-001 li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .2vw;
}

.breadcrumb-001 li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .5em;
    height: .5em;
    margin-left: 1.2vw;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}

.breadcrumb-001 a {
    color: #333333;
    text-decoration: none;
}

/* --------------------mainview--------------------- */
#mainview  {
  width: 100%;
  height: 35vw;
  background: url(/img/privacy.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

#mainview h2 {
  position: relative;
  top: 35%;
  font-size: 6vw;
  letter-spacing: 1.5px;
  color: #fff;
  align-items: center;
  text-align: center;
}


#main {
    width: clamp(300px, 70%, 1000px);
    margin: 4vw auto;
}

/* ベース */
:root{
  --fg:#3c3c3c;
  --muted:#6b7280;
  --bg:#ffffff;
  --line:#e5e7eb;
  --brand:#0ea5e9;
  --box:#f8fafc;
}

@media (prefers-color-scheme: dark){
  :root{
    --fg:#e5e7eb; --muted:#9aa0a6; --bg:#0b0c0f; --line:#1f2937; --box:#111827;
    --brand:#38bdf8;
  }
}

*{box-sizing:border-box}

/* レイアウト */
.container{max-width:920px;margin:auto;padding:48px 20px}
.page-header h1{font-size:clamp(22px,3.6vw,34px);margin:0 0 12px}
.lead{margin:0 0 24px}

/* 目次 */
.toc{border:1px solid var(--line);background:var(--box);padding:16px 18px;border-radius:12px;margin:24px 0 40px}
.toc strong{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:18px}

/* 記事 */
.policy{margin-bottom:56px}
.policy h2{font-size:clamp(20px,3vw,28px);margin:28px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.policy h3{font-size:clamp(16px,2.6vw,22px);margin:28px 0 8px}
.policy h4{font-size:clamp(15px,2.2vw,19px);margin:16px 0 8px;color:var(--muted)}
.policy p{margin:0 0 14px}
.policy ul, .policy ol{margin:8px 0 16px 20px}
.policy li{margin-bottom:6px}

/* 情報ボックス */
.box{border:1px solid var(--line);background:var(--box);padding:12px 14px;border-radius:10px}
.dates{color:var(--muted);margin-top:10px}

/* 先頭へ戻る */
.backtop{text-align:center;margin:48px 0 0}
.backtop a{color:var(--brand);text-decoration:none}
.backtop a:hover{text-decoration:underline}

/* 印刷 */
@media print{
  .toc,.backtop{display:none}
  .container{padding:0}
  a{text-decoration:none;color:inherit}
}

#contact {
  background-color: #fff;
}

/* -----------------------none---------------------- */
@media (min-width: 500px) {

}

/* --------------------------------------------------------Mobile------------------------------------------------------- */
@media (max-width: 500px) {
.breadcrumb-001 {
    width: 90%;
    display: flex;
    gap: 0 3vw;
    margin: 6vw auto 0vw;
    font-size: 3vw;
}    

#main {
    width: 85%;
    margin: 16vw auto;
}

#mainview  {
  height: 50vh;
  background: url(/img/privacy_sp.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

#mainview h2 {
  font-size: 8vw;
  top: 45%;
}

}