/* top.css */

/* --- page-wrapper for layout --- */
.page-wrapper {
    position: relative; /* 子要素のabsoluteの基準点 */
    min-height: 100vh; /* 最低でも画面の高さに */
    padding-bottom: 60px; /* フッターの高さ分の余白 */
    box-sizing: border-box;
    transition: padding-bottom 0.3s ease; /* スムーズな変化のため */
}
/* JSによってバナー表示時にbodyに付与されるクラス */
body.has-cookie-banner .page-wrapper {
    padding-bottom: 160px; /* フッター(60px) + バナーの高さ(約100px) */
}
body {
    font-size: 16px;
    margin: 0;
    /* height: 2000px; */ /* page-wrapperで管理するため不要に */
    background-image: linear-gradient(90deg, rgb(67 112 193), rgb(73 147 176));
    transition: background 1.5s ease;
    font-family: "Noto Sans";
}
header {
    position:fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
}
h1 {
    width: 132px;
    color: #333;
    position: absolute;
    top: 32px; 
    left: 72px;
    text-align: left;
    margin: 0;
}
h2 {
    font-size: 22px;
    color: #fff;
    letter-spacing: 0.25em;
}
h3 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-top: 0;
    margin-bottom: 40px;
}
dl { 
    margin: 0;
    letter-spacing: 0.1em;
}
dt { 
    margin: 10px 0;
}
dd { 
    font-size: 14px;
    margin-inline-start:0px;
    margin-bottom: 80px; 
}
footer {
    width: 100%;
    font-family: "Klee One", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 60px; /* 文字を上下中央に */
    text-align: center;
    color: #fff;
}

.hero-section {
    font-family: "Klee One", sans-serif;
    font-weight: normal;
    font-size: 22px;
    color: #fff;
    margin-bottom: 600px;
    padding: 240px 72px 0;
    box-sizing: border-box;
}
.message {
    line-height: 2.4em;
    letter-spacing: 0.1em;
}
.content-section {
    width: 100%;
    font-family: "Klee One", sans-serif;
    font-weight: normal;
    color: #fff;
    margin-bottom: 600px;
    padding: 80px 72px;
    box-sizing: border-box;
    background-image: linear-gradient(85deg, rgba(170, 139, 139, 0.39), rgba(153, 116, 116, 0.39) 41%, rgba(111, 181, 174, 0.39) 74%);
}
.content-section:last-child {
    margin-bottom: 0;
}
.content-section dl {
    margin-top: 60px;
}
.content-section dl dd:last-of-type {
    margin-bottom: 0;
}
.content-section p {
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0;
}
.content-section a {
    color: #fff;
}


/* .new-background {
    background: linear-gradient(to bottom, #FFF 0%, #D4FCFF 90%, #F2E7EA 93%, #FFF 100%) !important;
} */
.video-bg01 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    display: none;
}
.video-bg02 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    display: block;
}

.font01 {
    font-family: "duper", sans-serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.25em;
    font-size: 18px;
}
.logobox {
    width: 40px;
    height: 60px;
    position: absolute;
    top: 16px;
    left: 24px;
    overflow: hidden;
}
.logo {
    width: 40px;
    height: 40px;
    background: url("../logo.svg");
    position: absolute;
    top: 0px;
    left: 0px;
}

/* --- SP表示 (768px以下) --- */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    h1 {
        left: 54px;
    }
    .logobox {
        left: 12px;
    }
    h2, .message {
        font-size: 18px;
    }
    dd { 
        font-size: 12px;
    }
    h3 {
        font-size: 16px;
    }
    .hero-section {
        padding: 240px 24px 0;
    }
    .content-section {
        padding: 80px 24px;
    }
}