@charset 'UTF-8';

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

body{
    background-color:#FFFAE9;
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

header{
    position: fixed!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    background-color: #FFFAE9;
    z-index: 9999!important;
    height: 90px!important;
    border: none;
    border-bottom:0.5px solid rgb(101, 88, 88);
    box-sizing: border-box;
}


/*
LOADING
================================================ */
:root {
    --green: #87ce87;
    --green: #b0c2a7;
    --brown: #bcc3b0;
    --light-grey: #187c51;
    --white: #fff;
    --oswald-font: 'Oswald', sans-serif;
}

#loading {
    background-color: #037f49;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}
#loading-screen {
    background-color:#006036;
    position: fixed;
    inset: 0;
    z-index: 9998;
    translate: 0 100vh;
}
#loading p {
    font-size: 3rem;
    font-family:'Contralto Big Light', Consolas, 'Courier New', monospace;
    color: #FFFAE9;
}


/*
SLIDE MENU
================================================ */
/* 開閉ボタン */
.btn-menu {
    background-color:#FFFAE9;
    color: #f1f4f4;
    position: fixed;
    right: 1rem;
    top: 15px!important;
    z-index: 4;
    padding: 0;
    border: none;
    border-radius: 0;
    transition: .1s;
}

.btn-menu svg {
    fill: rgb(124, 114, 114);
    margin: 0;
    height: 3rem;
    width: 4rem;
    transition: fill .3s ease;
}

.btn-menu:hover svg{
    fill:rgb(7, 89, 26);

}



/* スライドメニューパネル,ハンバーガーマーク、カーソルを合わせる前のカラー */
#menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    padding: 8rem 2rem 2rem;
    width: 210px!important;
    height: 75vh;
    background-color:#72716e;
    font-family:'Contralto Big Light', Consolas, 'Courier New', monospace;
    translate: 100vw;
}
.menu-list {
    list-style: none;
}
.menu-list li{
    margin: 1.5rem 0;
    opacity: 0;
}

/* メニューリストの文字カラー */
.menu-list a {
    color: #f1f4f4;
    text-decoration: none;
    font-size: 1.5rem;
    cursor: default;
    display: block;
    transition: transform 0.1s, scale 0.1s, color 0.3s;
    outline: none;
}

.menu-list a:active{
    transform: translateY(2px);
    scale: 0.97;
}

.menu-list a:hover {
        transition: .4s;
        transform:scale(1.1);
        color: #e2dabc;
  }

/*
DESKTOP SIZE
================================================ */

/* SLIDE MENU, ハンバーガーメニューにカーソルを合わせた際の背景カラー */
.btn-menu:hover {
        background-color: #FFFAE9!important;;
        transform:scale(1.1);
    }

/* ハンバーガーマークにカーソルを合わせた際のハンバーガーマークのカラー */
.btn-menu:hover svg{
    fill:#c2c1bd;
}



.btn-menu:active{
        transform: translate(2px)!important;
        scale: 0.95!important;
        transition: transform 0.1s, scale 0.1s;
    }


/* 閉じるボタン,閉じるボタンの背景カラー */
#menu-close {
    border: none;
    background-color:#72716e!important;
}

/* カーソルを合わせる前の×のカラー */
#menu-close svg {
    fill:#f1f4f4;
}

#menu-close:hover{
    transform:scale(1.1);
}

/* ×にカーソルを合わせた際のカラー */
#menu-close:hover svg {
        fill:#e2dabc!important;
        transition: fill .3s ease;
    }



#menu-close:active{
    transform: translate(2px);
    scale: 0.95;
}



    /* サイトタイトル（Wevlia）の文字 */
.logotitle h1 {
    position: fixed ;
    top:2.5%;
    left:49%;
    transform: translateX(-51%);
    text-align: center;
    margin: 0;
    z-index: 99998;
    font-size: 55px;
    color: #006036;
    line-height: 1;
    white-space: nowrap;
    font-family:'Contralto Big Light', Consolas, 'Courier New', monospace;
    font-weight:100;
    font-style:normal;
}


.logotitle h1 a{
    text-decoration: none;
    color: inherit;
}


/* 💡 【新設定】ロタイトルを1つのセットにして、画面左上に固定する箱 */
.WAVLIA_image {
    position: fixed ;
    transform: none;
    left:1vw;
    top:10px;
    width: 65px !important;;
    height: 65px !important;;
    object-fit: cover;
    right: auto ;
    display: flex ; /* 💡 ロゴとタイトルを確実に横一列に並べる */
    align-items: center ; /* 💡 ロゴとタイトルの上下の中心をきれいに揃える */
    transform: none ;
    z-index: 99998 ;
}

.WAVLIA_image a {
    display: block;
}

.WAVLIA_image:hover{
        transform:scale(1.1);
}



.threelogos{
    display:flex;
    width:auto;
    position: relative;
    margin-top: 55px;
    margin-bottom: -6vw;
    margin-left: 5.9vw;
    gap:38px;
}

.threelogos img{
    width:25px;
    height:25px;
    transition:.3s;
    position: fixed;
}


/* メールのロゴは他の2つのロゴと少し大きさが違うため */
.threelogos .mail{
    width:30px;
    height:30px;
    transition:.3s;
}

.threelogos img:hover{
    transform:scale(1.1);
}



.topmenu{
    position: fixed;
    top: 20px;
    right: 140px;
    z-index: 9999;
    width: auto;
    margin-top: 2.3vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.about,
.works{
    font-size: 2vw;
    color:#72716e;
    text-decoration: none;
    font-family:'Contralto Big Light', Consolas, 'Courier New', monospace;
}

.about{
    margin-right: 50px;
}

.works{
    margin-right: 3vw;
}

.about:hover,
.works:hover{
    color:#e2dabc;
    transform:scale(1.1);
}

.space {
  margin-bottom: 10em; /* 3行（3文字分）の余白を開ける場合 */
}

.title{
    font-family:'Contralto Big Light', Consolas, 'Courier New', monospace;
    font-size: 9rem !important;
    margin-left: 0;
    position: relative;
    display: inline-block;
    font-weight: 300;
    color:#72716e;
    margin-top: 30px;
    transform: translateX(5px)!important;
    transform: translateY(18px)!important;
    opacity: 1;
    margin-top:-230px;
}


.title p {
    font-family: 'Contralto Big Light', Consolas, 'Courier New', monospace;
    font-size: 9rem !important;
    margin-left: 4%;
    position: relative;
    display: inline-block;
    font-weight: 300;
    color: #72716e;
    transform: translateX(5px)!important;
    transform: translateY(18px) !important;
    opacity: 1;
    padding-bottom: 50px;
    margin-bottom: 40px;
}


.title p::after {
    content: "";
    position: absolute;
    margin-left:-10%;
    margin-top: 40%;
    bottom: 0;
    width: 900vw;
    height: 0.5px;
    background: #c1baa4;
    transform: translateX(-50%);
}



.profile{
        margin-left: 14%;
        color: rgb(101, 88, 88);
        margin-top: 40px;
 }

.sujets{
    margin-left: 14%;
    margin-top: 1.5%;
    color: rgb(101, 88, 88);

}

.text {
    margin-left: 15%;
    color: rgb(101, 88, 88);
}


.rectangle{
    position: relative;
    width: 85vw;
    height: 320px;
    margin-top: 7%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f6f0da;
    box-sizing: border-box;
}


.myinformations {
    text-align: left;
    vertical-align: middle;
    font-weight:bold;
    font-size: 15px;
    margin-left: 23%;
    color: rgb(101, 88, 88);

}

.accounts1{
    display: inline-block;
    font-size: 32px;
    font-weight:400;
    font-family:'Contralto Big Light', Consolas, 'Courier New', monospace;
    margin-left: 23%;
    margin-top: 4%;
    color: rgb(101, 88, 88);
}

.alphabet{
    display: inline-block;
    font-size: 37px;
    font-weight:400;
    margin-left: 2%;
    font-family:'Contralto Big Light', Consolas, 'Courier New', monospace;
    margin-top: 3.3%;
    color: rgb(101, 88, 88);
}


.accounts {
    font-size:15px;
    font-weight:bold;
    margin-left: 23%;
    color: rgb(101, 88, 88);
}

.rectangle img {
    position: absolute;
    width:10rem;
    height:15rem;
    position: absolute;
    top:13%;
    left:8%;
    object-fit: cover;
}

.information{
    margin-top: 20px;
    color: rgb(101, 88, 88);
    max-width: 100%;
    box-sizing: border-box;
}

.height2{
    height: 7em;
}