@charset "UTF-8";
html{font-size: 100%;  width: 100%; height: 100%;font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* Safari and Chrome */
    -moz-osx-font-smoothing: grayscale; /* Firefox on macOS */} /* 余白なし設定,統一フォント */
/*全体

/*スマホ画面ヘッダー設定
------------------------------------------------------------------------------------------------*/
@media(max-width:800px){/*以下横幅800ピクセル以下の時の表示設定*/
/*会社ロゴ：余白設定*/
.logo{width: 300px;}                                     /*会社ロゴ：サイズ指定*/
.logo{height: 30px;}
.logo {margin-top: 1rem; margin-left: 1rem;}            /*=======ヘッダー統一=====*/
.logo-footer img {width: 300px; height: 10px;}

/*===========================================================ヘッダー統一=======================================================*/ 
header{top: 0; left: 0; right: 0; height: 4rem; position: fixed; background-color: #ffffff;}    /* ヘッダー：上 左右 下の余白指定 */
header{
    display: flex;                  /* ヘッダー：横並び指定 */
    justify-content: space-between; /* ヘッダー：両端合わせ指定 */
    z-index: 2;
    }
/*===========================================================ヘッダー統一=======================================================*/ 

    #nav-toggle{display: none;}                          /* ナビゲーション：チェックボックス非表示 */
    .main-nav a {color: #696969;}                      /* ナビゲーションテキスト：カラー */
    .main-nav a {font-size: 18px;}                       /* ナビゲーションテキスト：サイズ */
    .main-nav  {line-height: 1;}
     nav a {text-decoration: none;}                      /* ナビゲーションテキスト：のアンダーラインの非表示 */
    .main-nav a:hover {color: rgb(183, 183, 183);}     /* ナビゲーションテキスト：選択時の変化色 */
     nav ul {list-style: none;}                          /* ナビゲーションテキスト：のリストマーカー（・）の非表示 */
     nav a {display: block;padding: 15px 20px;}          /* ナビゲーション展開時のテキスト間隔調整 */
    
 
    .nav-toggle-label {
        display: flex;               /* トグルアイコン：形指定 */
        flex-direction: column;      /* トグルアイコン：形指定 */
        width: 30px;                 /* トグルアイコン：幅指定 
        height: 30px;                /* トグルアイコン：高さ指定 */
        z-index: 11;                 /* トグルアイコン：前後関係 */
        margin-top: 1rem;            /*=======ヘッダー統一=====*/ 
        margin-right: 1rem;          /*=======ヘッダー統一=====*/
    }
    
    .nav-toggle-label span {
        background-color: #696969; /* トグル3本線：色設定 */
        height: 3px;                 /* トグル3本線：太さ設定 */
        width: 100%;                 /* トグル3本線：幅設定 */
        margin: 4px;                 /* トグル3本線：間隔設定 */
        transition: 0.3s;background-color: 0.3s;/* トグル3本線：アニメーション */
    }
    
    nav {
        display: flex;             /* 白マスク画面：通常時非表示 *//* ★★星 */
        position: fixed;
        justify-content: center;   /* 白マスク画面：テキスト位置指定 */
        top: 0px;
        width: 100%;               /* 白マスク画面：ウィンドウ全体を覆う */
        height: 100%;              /* 白マスク画面：ウィンドウ全体を覆う */
        z-index: 9;
        background-color: rgba(255, 255, 255, 0.80);/* 白マスク画面：半透明背景設定 */
        opacity: 0;                /* ★★星 */
        transition: opacity 0.5s ease; /* フェードインのアニメーション *//* ★★星 */
        pointer-events: none; /* クリック無効 *//* ★★星 */
        text-align: center;        /* 白マスク画面：テキスト中央揃え */
        align-items: center;       /* 白マスク画面：ナビテキストとSNSアイコンを中央合わせ */
        left: 0px;                 /* 白マスク画面：画面端からマスク表示 */
    }
    
    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);background-color: #696969;}/* トグル展開時の色 */
    
    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {opacity: 0;} /* チェック時に消える */
    
    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);background-color: #696969;} /* トグル展開時の色 */
    
    .nav-toggle:checked ~ nav {display: flex;flex-direction: column;} /* ナビゲーション展開時のレイアウト指定（縦並べ） */
    .nav-toggle:checked ~ nav {
        opacity: 1; /* フェードインの最終状態 */
        pointer-events: all; /* クリック有効 */ }
    a {
        text-decoration: none;
        color: #696969;}
    a:hover {
        color: #9e9b9b ; }  
    

    /*-----------------------------   フッターSNSアイコンの編集-----------------------*/

    .social-icons  {
        display: inline-block;
        position: absolute;
        top: 95%;
        display: flex;
        }
        
        .social-icons img {
        width: 30px; /* 画像の幅を指定 */
        height: 30px; /* 画像の高さを指定 */
        object-fit: contain; /* 画像を中央に収めて比率を維持 */

        }
/*----------------------------------------------------------------------------------------------*/
.container{
margin-left: 1rem;
margin-right: 3rem;
}
.title{
    color: #696969;/**/
    font-size: 15px;
    text-align: center;
    margin-top: 50%;                   
}
.projectname{
    margin-top: 0.6vh;
}

.image-container {
    margin-top: 1rem;
    width: 94%;
    height: 40%;
    background: #ffffff;
    /*background: rgba(0, 0, 0, 0.8);*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
   /* border: 2px solid #696969;*/
   border: 0.5px solid #e2e1e1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.fade-in {
    animation: fadeIn 0.5s;
}

.fade-out {
    animation: fadeOut 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.slideshow-container img {
    margin-top: 4%;
        position: relative;

}
.slides {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 0s linear 1s;
    margin-right:3%;
}
.slides img {
    width: 100%;
}
.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-in-out, visibility 0s linear 0s;
}
.prev, .next {
    cursor: pointer;
    position: fixed;
    padding: 10px;
    margin-top: 25%;
    color: #696969;
    font-weight: bold;
    font-size: 25px;
    user-select: none;
}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev {
    left: 0;
}
}

@media(min-width:800px){/*以下横幅800ピクセル以上の時の表示設定*/

    /*======================header,footer 当一所=======================*/
    header{
        top: 0;                         /* 上から0位置に固定 */
        right: 0;                       /* 右から0位置に固定 */
        left: 0;                        /* 左から0位置に固定 */
        height: 5rem;                   /* ヘッダーの高さ */
        display: flex;                  /* ヘッダー：横並び指定 */
        justify-content: space-between; /* ヘッダー：両端合わせ指定 */
        position: fixed;                /* 位置を固定にする */
        background-color: #ffffff;    /* ヘッダー背景色 */
        z-index: 20;
        }
    /*======================header,footer 統一=======================*/
        /*左上ロゴ編集*/
        .logo{width: 400px;margin-top: 1.5rem;margin-left: 1.5rem;}   /* 会社ロゴ：画像幅指定 */
        .logo{height: 30px;}                /* 会社ロゴ：画像高さ指定 */
        #nav-toggle{display: none;}         /* ナビゲーション：チェックボックス非表示 */ 
        nav ul {list-style: none;}          /* ナビゲーションテキスト：リストマーカー（・）の非表示 */
        nav {
            display: flex; /* デスクトップサイズでは表示 */
            position: static; /* 固定位置を解除 */
            width: auto;
            margin-top: 1.7rem;
        }
        nav a {margin-right: 2.5rem;}                   /* ナビゲーションテキスト：間隔調整 */
        .main-nav {display: flex;}                      /* デスクトップサイズ：ナビゲーションメニューの横並び設定 */
        .main-nav a {font-size: 17px;}                  /* ナビゲーションテキスト：サイズ */
        .nav-toggle-label {display: none;}              /* デスクトップサイズ：トグルアイコンの非表示 */
        nav a {text-decoration: none;}                      /* ナビゲーションテキスト：のアンダーラインの非表示 */
        .main-nav a:hover {color: rgb(183, 183, 183);}     /* ナビゲーションテキスト：選択時の変化色 */
        .social-icons{display: none;}
        .main-nav a {color: #696969;}                      /* ナビゲーションテキスト：カラー */
  
    /*--------------------アニメーション---------------------*/
    @keyframes slideIn {
        from {
            transform: translateX(0);     /*⭐️⭐️⭐️アニメーション： 移動する時間*/
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(0);
            opacity: 0;
        }
    }
    /*--------------------アニメーション---------------------*/

.container{
    margin-top: 3rem;
    width: 100%;                                /*---全画面---*/
    display: flex;                              /*---subtileとマインテキスト横並び---*/
    flex-direction: row;
    animation: slideIn 2.5s ease-in-out; /*⭐️⭐️⭐️アニメーション：時間*/
}

.title {
    width: 25%;                                 /*---全画面の100/28％---*/
    height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;                    /*---水平中央揃え---*/
    align-items: center;                        /*---垂直中央揃え---*/
    text-align: center;
    color:#696969;
    gap: 1vh;
}
.subtitle {                                      /*---サブメニュー---*/
    font-size: 1.5vw;
}
.projectname {                               
    font-size: 0.8vw;
    align-items: center;
    white-space: nowrap;
}
.social-icons {display: none;}
.slideshow-container {
    width: 75%;
    height: 92vh;
    align-items: center;
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical centering */

}
.slides {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 0s linear 1s;
    place-items: center; /* Centers both horizontally and vertically */
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical centering */
    height: 75vh;
}
.slides img {
    width: 75vw;
    height: 90vh;
    aspect-ratio: 1/1;
    object-fit: contain;
    background-color: #ffffff;
}
.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-in-out, visibility 0s linear 0s;
}
.prev, .next {
    cursor: pointer;
    position: fixed;
    margin-left: 25%;
    padding: 20px;
    color: #696969;
    font-weight: bold;
    font-size: 25px;
    user-select: none;
}
.next {
    right: 0;
}
.prev {
    left: 0;
}
}