.sp-br { display: none; }

.pc-br { display: block; }

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

/* 初期状態 */
section > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 見えたら */
section.visible > * {
    opacity: 1;
    transform: translateY(0);
}

.wrapper {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #07070ccc;
    z-index: 0;
}

.wrapper > * {
    position: relative;
    z-index: 1;
}

header {
    background-color: rgba(0, 0, 0, 0.3);  /* 半透明の黒 */
    padding: 15px 63px;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    backdrop-filter: blur(8px);  /* ガラス風ぼかし */
}

header nav {
    max-width: 1200px;
    margin: 0 auto;
}

header li img {
    height: 2.5em;          /* テキストの行の高さに合わせる */
    width: auto;            /* 縦横比を維持 */
    vertical-align: middle; /* 縦方向の位置を中央に */
}

header ul {
    list-style: none;    /* 箇条書きの点を消す */
    display: flex;       /* 横並びにする */
    justify-content: space-between;  /* 項目を均等に配置 */
    align-items: center;             /* 縦方向の中央揃え */
    gap: 20px;           /* 項目間の間隔 */
    margin: 0;
    padding: 0;
}

header a {
    text-decoration: none;
    color: #FFF;
    padding: 15px 20px;
    transition: background-color 0.3s, color 0.3s;
}

header a:hover {
    background-color: rgba(149, 215, 255, 0.15);  /* #95d7ffの淡い透過 */
    color: #95d7ff;
}


body{
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Arimo"; 
    font-size: 18px;
    line-height: 1.6;
}

.general {
    padding: 85.5px 63px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.general > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1035px;
}

.bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* ::before で作るオーバーレイに position: absolute を使うため、その基準点（親要素）として必要。*/
}

.bg::before {
    content: ""; /* 疑似要素を表示するために必須 */
    position: absolute; /* 親要素（.bg）を基準に配置 */
    top: 0;
    left: 0; /* 左上から開始 */
    width: 100%;
    height: 100%; /* 親要素全体を覆う */
    background-color: #07070ccc; /* cc = 約80%の透明度 */
    z-index: 0; /* 背景より上、コンテンツより下に配置 */
}

/* コンテンツを上に表示 */
.bg > * {
    position: relative;
    z-index: 1;
}

.discription {
    color: #FFFF;
    font-size: 18px;
}

.white {
    color: #FFFF;
}

/* 見出し */
.midasi {
    font-family: "Sora";
    font-size: 45px; 
    line-height: 1.25;

    background: linear-gradient(#95d7ff, #1d60afff);
    -webkit-background-clip: text; /* Safari/Chrome用（互換性のため）*/
    background-clip: text; /* 背景をテキストの形に切り抜く */
    color: transparent; /* 文字色を透明にして背景を見せる */
}

.midasi2 {
    font-family: "Sora";
    font-size: 45px; 
    line-height: 1.25;
}

/* 問い合わせボタン */
.btn {
    background: linear-gradient(143deg, #ff0e0e 0%, #1d60afff 100%);
    border-radius: 0.125em;
    padding: 9px 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em ;
    text-decoration: none;
    color: #FFFF; /* 文字の色 */
}

.container {
    display: flex;
    gap: 20px;
}

/* セクション内の要素を縦に並べて間隔を統一 */
.general > div {
    display: flex;
    flex-direction: column;
    gap: 18px; 
}

.back-to-top {
    position: fixed; /* 画面に固定 */
    bottom: 30px;           
    right: 40px;            
    background: linear-gradient(143deg, #ff0e0e 0%, #1d60afff 100%);
    color: #FFF;
    width: 50px;
    height: 50px;
    border-radius: 50%;     
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    z-index: 100; /* 他の要素より上に表示 */
}

#overview {
    padding-top: 140px; /* ヘッダーの高さ分を確保*/
}

footer {
    background-color: #07070C;
    color: #FFF;
    text-align: center;
    padding: 2em;
    font-size: 0.875em;
}

footer a {
    color: #FFF;
    text-decoration: none;
}

.marking{
    background: linear-gradient(red 60%);
    color:white;
}