* {
    box-sizing: border-box;
}

html,body {
    margin: 0;
}

/* ベース（背景画像） */
body {
        position: relative;
        isolation: isolate;

        min-height: 100svh;

        /* 従来のbody背景を解除 */
        background-image: none;
    }

    /* 背景専用レイヤー */
    body::before {
        content: "";

        position: fixed;
        inset: 0;
        z-index: -1;

        background-image: url("./img/prof.webp");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;

        pointer-events: none;
    }

.header {
    position: fixed; /* ヘッダーを固定位置に設定 */
    top: 0; /* ヘッダーの上端を画面の上端に設定 */
    left: 0; /* ヘッダーの左端を画面の左端に設定 */
    z-index: 100; /* ヘッダーの重なり順序を100に設定 */
    width: 100%; /* ヘッダーの幅を100%に設定 */
}

.ribbon {
    position: relative; /* リボンを相対位置に設定 */
    z-index: 2; /* リボンの重なり順序を2に設定 */
    
    display: block; /* リボンをブロック要素として表示 */
    width: 100%;
    height: auto;
}
.privacy-main {
    position: relative;
    z-index: 1;
    width: min(1350px, calc(100% - 80px));
    margin: 0 auto;
    padding: clamp(180px, 16vw, 260px) 0 80px; /* 上部の余白をヘッダーの高さ分に設定、下部の余白を80pxに設定 */
}

.privacy-heading {
    margin-top: 30px; /* 上部の余白を50pxに設定 */
    display: flex;
    align-items: center;
    gap: 20px;
    text-shadow: 8px 8px 2px rgba(32, 31, 31, 0.1); /* テキストに影を追加 */
    font-family:'Alata', sans-serif; /* フォントを'Alata'に設定 */
    font-size: clamp(40px, 4.5vw, 60px); /* フォントサイズを40pxに設定 */
    font-weight: 400; /* フォントの太さを400に設定 */
    color: #636F6F; /* フォントカラーを#636F6Fに設定 */

    width: fit-content;
    margin-left: calc(50% - 50vw);
    margin-bottom: 30px; /* 下部の余白を20pxに設定 */
}

.privacy-heading::before {
    content: "";
    width: clamp(70px, 10vw, 145px); /* アイコンの幅を70pxに設定 */
    border-top: 3px solid #636f6f;
    box-shadow: 8px 8px 2px rgba(32, 31, 31, 0.1); /* アイコンに影を追加 */
}

.privacy-title {
    margin: 0;
    color: #636f6f;
    font-family: "Alata", sans-serif;
    font-size: clamp(42px, 4.5vw, 66px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-shadow: 8px 8px 2px rgba(32, 31, 31, 0.1);
}

/* 半透明の白い長方形 */
.privacy-content {
    margin-top: 80px;
    padding: 34px 50px 48px;
    background-color: rgba(255, 255, 255, 0.62);
    box-shadow: 0 10px 35px rgba(50, 80, 100, 0.08);
    font-family:'Noto Sans JP', sans-serif; /* フォントを'Noto Sans JP'に設定 */
    color: #636F6F; /* フォントカラーを#636F6Fに設定 */
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.025em;
}

.privacy-content p {
    margin: 0 0 14px;
}

.policy-section {
    margin-top: 34px;
}

.policy-section h2 {
    margin: 0 0 10px;
    color: #536363;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.policy-section h3 {
    margin: 26px 0 10px;
    color: #536363;
    font-size: 15px;
    font-weight: 600;
}

.privacy-content ul {
    margin: 6px 0 18px;
    padding-left: 2em;
}

.privacy-content li {
    padding-left: 0.25em;
}

.privacy-content a,
.privacy-content a:visited {
    color: #087f83;
    text-underline-offset: 4px;
}

.privacy-content a:hover,
.privacy-content a:focus-visible {
    opacity: 0.65;
}

.external-links {
    word-break: break-word;
}

.enactment-date {
    margin-top: 28px !important;
    text-align: right;
}

.footer {
    text-align: center; /* フッターのテキストを中央揃えに設定 */
    font-family:'Zen Kaku Gothic', sans-serif; /* フォントを'Zen Kaku Gothic New'に設定 */
    font-size: 12px; /* フォントサイズを12pxに設定 */
    color: #636F6F; /* フォントカラーを#636F6Fに設定 */
    margin-top: 100px; /* 上部の余白を100pxに設定 */
    margin-bottom: 0; /* 下部の余白を0に設定 */
}