body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
}

/* ヘッダー */
header{
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100vw;
    background-color: white;
    box-shadow: 0 0 8px gray;
}
#Genie_header{
    display: flex;
    justify-content: space-between;
}
#Genie_header h1{
    margin: 2% 0 2% 20%;
    font-family: serif;
    font-size: 30px;
}
#header-list{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 44px;
    margin: 0;
    list-style: none;
}
#header-list li{
    margin: 0 -1%;
}
#header-list a{
    text-decoration: none;
    padding-right: clamp(22px,4.4vw,44px);
    font-size: clamp(10px,1.4vw,14px);
    font-family: serif;
    color: dimgray;
}
#header-list a:hover{
    text-decoration: underline;
    color: black;
}

.lp-top{
    position: relative;
    width: 100%;
    margin: 0;
    margin-top: 40px;
}
.lp-top img{
    width: 100%;
    height: clamp(300px,80vw,700px);
    object-fit: cover;
}
.top-text{
    position: absolute;
    width: 46%;
    top: 25%;
    left: 50%;
    color: #333333;
    padding-right: 0;
}
.top-text h1{
    font-size:clamp(12px, 2vw,20px);
    line-height: clamp(16px,3vw,32px);
    font-family: serif;
}
.lp-main{
    padding: 4%;
    font-family: serif;
}
.personal-history{
    padding: 4%;
    border:double 6px rgb(255, 200, 100);
    display: flex;
    flex-wrap: wrap;
}
.history-title{
    width: 100%;
    padding-bottom: 2%;
}
.personal-history_text{
    width: 100%;
}
.personal-history_img img{
    width:100%;
}
.history-title h1{
    font-size: clamp(30px,3.6vw,36px);
    text-align: center;
    font-weight: 100;
    color: #333333;
    padding: 0;
    margin: 0;
}
.history-title h2{
    font-size: clamp(30px,3.6vw,36px);
    display: flex;
    align-items: center;
    color: #333333;
    padding: 0;
    margin: 0;
}
.history-title h2:before,
.history-title h2:after{
    content:"";
    height: 1px;
    flex-grow: 1;
    background-color: #333333;
    margin-right: 1rem;
    margin-left: 1rem;
}
.history_list{
    display: flex;
    justify-content: center;
    padding-bottom: 4%;
    width: 80vw;
}
.history_list_tr{
    /* width: 100vw; */
}
.history_list_tr td{
    font-size:clamp(12px, 2vw,16px);
    height: clamp(30px, 6vw,60px);
    color: #333333;
    font-family: sans-serif;
}
@media (max-width:650px) {
    .personal-history{
        padding: 0%;
        border:double 6px rgb(255, 200, 100);
        display: flex;
        flex-direction: column-reverse;
    }
    .history-title{
        width: 100%;
    }
    .personal-history_text{
        width: 100%;
        padding-left: 0%;
        margin: 4% 0;
    }
    .history-items{
        height: 100%;
    }
    .history-title h1{
        font-size: clamp(30px,3.6vw,36px);
        text-align: center;
        font-weight: 100;
        color: #333333;
        padding: 0;
        margin: 0;
    }
    .history-title h2{
        font-size: clamp(30px,3.6vw,36px);
        display: flex;
        align-items: center;
        color: #333333;
        padding: 0;
        margin: 0;

    }
    .history-title h2:before,
    .history-title h2:after{
        content:"";
        height: 1px;
        flex-grow: 1;
        background-color: #333333;
        margin-right: 1rem;
        margin-left: 1rem;
    }
    .history_list{
        padding-left: 2%;
        padding-bottom: 2%;
        margin-left: 10%;
    }
    .history_list_tr td{
        font-size:clamp(12px, 2vw,16px);
        color: #333333;
    }
}

.lp-sns{
    width: 100%;
    margin: 4% 0 6% 0;
    display: flex;
    justify-content: center;
    flex-flow: column;
    color: #333333;
    font-family: serif;
}
.sns-title{
    width: 100%;
}
.sns-title h2{
    font-size: clamp(30px,3.6vw,36px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sns-title h2:before,
.sns-title h2:after{
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #333333;
    margin-right: 1rem;
    margin-left: 1rem;
}
.sns-table{
    width: 75%;
    margin: auto;
}
.table-items{
    width: 33%;
    text-align: center;
    text-decoration: underline;
}
.sns-table th{
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 100;
}
.sns-table td{
    text-align: center;
    height: 60px;
}
.sns-table img{
    width: 40px;
}

/* フッター */
footer{
    background-color: #1a1a1a;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
.footer_item{
    display: flex;
    justify-content: space-between;
    padding-top: 6%;
    padding-bottom: 4%;
    width: 100%;
}
.footer_item01 a,
.footer_item02 a{
    display: flex;
    color: #ccc;
    font-family: serif;
    font-size: clamp(10px,1.4vw,18px);
    text-decoration: none;
}
.footer_item01{
    margin-left: 16%;
}
.footer_item02{
    margin-right: 16%;
}
.footer_item03{
    display: flex;
    margin-bottom: 2%;
}
.footer_item a{
    text-decoration: none;
    padding-bottom: 8%;
}
.footer_item a:hover{
    text-decoration: underline;
    color: white;
}
footer h4{
    color: #ccc;
    font-family: serif;
    font-size: clamp(10px,1.4vw,14px);
    transform: scale(0.8);
    transform-origin: center;
}