@charset "UTF-8";
html{font-size: 100%;  width: 100%; height: 100%; color: #696969;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;}            /*=======ヘッダー統一=====*/
/*===========================================================ヘッダー統一=======================================================*/ 

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

    #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; /* クリック有効 */
    }
    
    /*-----------------------------   フッターSNSアイコンの編集-----------------------*/

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

    /*----------------------------------------------------------------------------------------------*/

    .main{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    height: 100%;
    gap: 0.2rem;
    margin-left: 4%;
    margin-right: 3%;
    }
    .main img{
    width: 100%;
    aspect-ratio:  1.65/1;
    object-fit: cover;
    height: 100%;
    }
    .main li{list-style:none;} /* WORKSギャラリー：リストマーカー（・）の非表示 */

        /*--------------------アニメーション---------------------*/
        @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;
            }
        }
        /*--------------------アニメーション---------------------*/
        .image-container {
            margin-top: 0.5rem;
            display: block;
            position: relative;
            object-fit: cover;
            height: 100%;
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .subtitle{
            margin-left: 4%;
            margin-top: 4rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .title{
            font-size: 18px;
            align-items: center;
            font-weight: bold;
        }
    
        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        }
        
        .image-container:hover .overlay {
            opacity: 1;
        }
        .text {
            color: rgb(174, 174, 174);
            font-size: 13px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        /*.image-container img {
            filter: grayscale(100%);
            transition: filter 0.5s ease;
        }*/
        .image-container:hover img {
            filter: grayscale(0%);
        }
        .button {
            display: inline-block;
            padding: 0rem 1.0rem;
            background-color: #ffffff;
            border: none;
            color: #696969;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .button:hover {
          background-color: #494949;
        }
    
}

/*デスクトップサイズ
------------------------------------------------------------------------------------------------*/

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

    /*======================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{
    width: 100%;                                /*---全画面---*/
    display: flex;                              /*---subtileとマインテキスト横並び---*/
    flex-direction: row;
    animation: slideIn 2.5s ease-in-out; /*⭐️⭐️⭐️アニメーション：時間*/
}

.button {
    display: inline-block;
    padding: 0.5rem 1.0rem;
    background-color: #494949;
    border: none;
    color: #696969;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #ffffff;
}



.subtitle {                                      /*---サブメニュー---*/
    width: 25%;                                 /*---全画面の100/28％---*/
    height: 100%;
    display: block;                              /*---フレックスボックスを使用---*/
    padding-top: 50vh;
    position: fixed;
    background-color: #494949;

}
.title {
    justify-content: center;                    /*---水平中央揃え---*/
    align-items: center;                        /*---垂直中央揃え---*/
    text-align: center;
    color:rgb(255, 255, 255);
    font-size: 25px;
    background-color: #494949;
    
}

.main{
    margin-left: 25%;                /*ワークスギャラリー：外余白なし*/
    width: 75%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 5rem;
    height: 100%;
    gap: 0.2rem;
}
.submenu {
    line-height: 2;
    color:rgb(255, 255, 255);
    font-weight: bold;
    font-size: 25px;
    display: block;
    display: flex;
    justify-content: center;
    margin-top: 80%;
}

.main img{
    width: 100%;
    aspect-ratio:  1.4/1;
    object-fit: cover;
    height: 100%;
}

.main li{list-style:none;} /* WORKSギャラリー：リストマーカー（・）の非表示 */
.main img:hover {opacity: .5;transition: opacity 0.3s ease; filter: none;}/* WORKSギャラリー：マウスカーソルアニメーション */

.image-container {
    display: block;
    position: relative;
    object-fit: cover;
    height: 100%;

}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.image-container:hover .overlay {
    opacity: 1;
}
.text {
    color: rgb(174, 174, 174);
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.image-container img {
    opacity: 0.8;
    transition: filter 0.5s ease;
}

/*.image-container:hover img {
    filter: grayscale(0%); */

}


/*タブレットサイズ
------------------------------------------------------------------------------------------------*/

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

    /*======================header,footer 当一所=======================*/
    header{
        top: 0;                         /* 上から0位置に固定 */
        right: 0;                       /* 右から0位置に固定 */
        left: 0;                        /* 左から0位置に固定 */
        height: 4.5rem;                   /* ヘッダーの高さ */
        display: flex;                  /* ヘッダー：横並び指定 */
        justify-content: space-between; /* ヘッダー：両端合わせ指定 */
        position: fixed;                /* 位置を固定にする */
        background-color: #ffffff;    /* ヘッダー背景色 */
        z-index: 20;
        }
    /*======================header,footer 統一=======================*/
        /*左上ロゴ編集*/
        .logo{width: 280px;margin-top: 1.5rem;margin-left: 1.5rem;}                /* 会社ロゴ：画像幅指定 */
        .logo{height: 24px;}                /* 会社ロゴ：画像高さ指定 */
        #nav-toggle{display: none;}         /* ナビゲーション：チェックボックス非表示 */ 
        nav ul {list-style: none;}          /* ナビゲーションテキスト：リストマーカー（・）の非表示 */
        nav {
            display: flex; /* デスクトップサイズでは表示 */
            position: static; /* 固定位置を解除 */
            width: auto;
            margin-top: 1.7rem;
        }
        nav a {margin-right: 1.2rem;}                   /* ナビゲーションテキスト：間隔調整 */
        .main-nav {display: flex;}                      /* デスクトップサイズ：ナビゲーションメニューの横並び設定 */
        .main-nav a {font-size: 14px;}                  /* ナビゲーションテキスト：サイズ */
        .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{
    width: 100%;                                /*---全画面---*/
    display: flex;                              /*---subtileとマインテキスト横並び---*/
    flex-direction: row;
    animation: slideIn 2.5s ease-in-out; /*⭐️⭐️⭐️アニメーション：時間*/
}

.button {
    display: inline-block;
    padding: 0.5rem 1.0rem;
    background-color: #494949;
    border: none;
    color: #696969;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #ffffff;
}



.subtitle {                                      /*---サブメニュー---*/
    width: 25%;                                 /*---全画面の100/28％---*/
    height: 100%;
    display: block;                              /*---フレックスボックスを使用---*/
    padding-top: 50vh;
    position: fixed;
    background-color: #494949;

}
.title {
    justify-content: center;                    /*---水平中央揃え---*/
    align-items: center;                        /*---垂直中央揃え---*/
    text-align: center;
    color:rgb(255, 255, 255);
    font-size: 25px;
    background-color: #494949;
    
}

.main{
    margin-left: 25%;                /*ワークスギャラリー：外余白なし*/
    width: 75%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 4.5rem;
    height: 100%;
    gap: 0.2rem;
}
.submenu {
    line-height: 2;
    color:rgb(255, 255, 255);
    font-weight: bold;
    font-size: 25px;
    display: block;
    display: flex;
    justify-content: center;
    margin-top: 80%;
}

.main img{
    width: 100%;
    aspect-ratio:  1.4/1;
    object-fit: cover;
    height: 100%;
}

.main li{list-style:none;} /* WORKSギャラリー：リストマーカー（・）の非表示 */
.main img:hover {opacity: .5;transition: opacity 0.3s ease; filter: none;}/* WORKSギャラリー：マウスカーソルアニメーション */

.image-container {
    display: block;
    position: relative;
    object-fit: cover;
    height: 100%;

}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.image-container:hover .overlay {
    opacity: 1;
}
.text {
    color: rgb(174, 174, 174);
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.image-container img {
    opacity: 0.8;
    transition: filter 0.5s ease;
}

/*.image-container:hover img {
    filter: grayscale(0%); */

}