Google Apps Scriptのcss/jsの反映及び出力がしたいです。

前提・実現したいこと

長文になってしまい、申し訳ございませんがお力をお借りしたく。
何卒よろしくお願い致します。

GASを使用して下記の内容を実行する社内システムを作成したいのですが、
htmlにcssとjsが反映ができず、また出力する際にエラーが発生してしまいスプレッドシートへの出力ができません。
※cssとhtmlは自身の作成したサイトでは反映されているのですが、doget.gsで使用すると反映できなくなりました。

<実現したいこと>
htmlにstyle_css及びstyle_jsを反映させる。
入力フォーム内に記入された情報をスプレッドシートに出力する。
出力が成功した場合、登録完了ページに移行する。

発生している問題・エラーメッセージ

ーcss/jsの反映ー
実行して表示された画面の上部に下記が表示され、cssとjsが反映ができません。

<?!= HtmlService.createHtmlOutputFromFile('style_css').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile("style_js").getContent() ?>

ー出力面ー
下記のエラーが出てしまい、出力できません。

ReferenceError: document is not defined（行 14、ファイル「コード」）
TypeError: Cannot read property 'value' of undefined（行 15、ファイル「コード」）
ReferenceError: document is not defined（行 16、ファイル「コード」）
TypeError: Cannot read property 'value' of undefined（行 17、ファイル「コード」）
ReferenceError: formObject is not defined（行 18、ファイル「コード」）
ReferenceError: formObject is not defined（行 20、ファイル「コード」）
ReferenceError: formObject is not defined（行 21、ファイル「コード」）

該当のソースコード

form1htmL
1<!DOCTYPE html>
2<html>
3  <head>
4  <base target="_top">
5  <meta charset="UTF-8">
6   <!--CSS-->
7  <?!= HtmlService.createHtmlOutputFromFile('style_css').getContent(); ?>
8 <!--JAVASCRIPT-->
9<?!= HtmlService.createHtmlOutputFromFile("style_js").getContent() ?>
10  <script>
11  function preventFormSubmit() {
12      var forms = document.querySelectorAll('form');
13      for (var i = 0; i < forms.length; i++) {
14        forms[i].addEventListener('submit', function(event) {
15          event.preventDefault();
16        });    
17        }
18  }
19      window.addEventListener('load', preventFormSubmit);
20
21    function handleFormSubmit(formObject) {
22      google.script.run.withSuccessHandler().processForm(formObject);
23    }
24    
25 </script>
26  </head>
27  
28  <header class="page-header">
29        <div class="menu-wrapper">
30            <div class="menu-trigger">
31                <span></span>
32                <span></span>
33                <span></span>
34            </div>
35            <nav>
36                <ul style="list-style: none;">
37                <li><a href="urlを記入">TOP</a></li>
38                <li><a href="urlを記入">案件登録</a></li>
39                <li><a href="urlを記入">企画状況登録</a></li>
40                </ul>
41            </nav>
42            <div class="overlay"></div>
43        </div>
44    </header>
45    
46  <body>
47  <h1>案件登録フォーム</h1>
48  <form onsubmit="handleFormSubmit(this)">
49        <table>
50            <tbody>
51                <tr>
52                　　 <th>フロント担当名：<th>
53                　　 <td>
54                        <select id="select1">
55                            <option value="選択肢1">選択肢1</option>
56                            <option value="選択肢2" selected>選択肢2</option>
57                            <option value="選択肢3">選択肢3</option>
58                        </select>
59                    <td>
60                 </tr>            
61                <tr>
62                　　 <th>デスク担当名：<th>
63                　　 <td>
64                    <select id="select2">
65                        <option value="選択肢1">選択肢1</option>
66                        <option value="選択肢2" selected>選択肢2</option>
67                        <option value="選択肢3">選択肢3</option>
68                    </select>
69                 </td>
70                <tr>
71                　　 <th>企業名：<th>
72                　　 <td>
73                         <input type="text" name="clientName" value="" required>
74                     </td>
75                 </tr>
76                 <tr>
77                　　 <th>案件名：<th>
78                　　 <td>
79                         <input type="text" name="projectName" value="" required>
80                     </td>
81               　</tr>
82                 <tr>
83                　　 <th>校了日：<th>
84                　　 <td>
85                         <input type="data" name="completionDate" value="2020-08-23" required>
86                     </td>
87                </tr>                 
88                 <tr>
89                　　 <th>備考:<th>
90                　　 <td>
91                         <textarea name="remark"></textarea>
92                     </td>
93                 </tr>
94            </tbody>
95        </table><!--end table-->
96        <input type="submit" value="登録する">
97</form>
98</body>
99</html>

resulthtml
1<!DOCTYPE html>
2<html>
3  <head>
4  <base target="_top">
5  <meta charset="UTF-8">
6 <!--CSS-->
7 <?!= HtmlService.createHtmlOutputFromFile('style_css').getContent(); ?>
8 <!--JAVASCRIPT-->
9<?!= HtmlService.createHtmlOutputFromFile("style_js").getContent() ?>
10  </head>
11<body>
12<h1>案件登録フォーム</h1>
13<p>案件が登録されました。<br><br><p>
14<a href=”https://script.google.com/macros/s/AKfycbwvNsTpF5-yq9IH6_kFutV_JjUAU1-uojNZghC-CfW4x9lov389/exec”>追加登録する</a>
15</body>
16</html>

stylecss
1<style>
2/*メニュー
3----------------------------*/
4.menu-wrapper{
5    height:100%;
6    overflow-x: hidden;
7    position: relative;
8}
9.menu-trigger {
10    display: inline-block;
11    width: 36px;
12    height: 28px;
13    vertical-align: middle;
14    cursor: pointer;
15    position: fixed;
16    top: 30px;
17    right: 30px;
18    z-index: 100;
19}
20.menu-trigger span {
21    display: inline-block;
22    box-sizing: border-box;
23    position: absolute;
24    left: 0;
25    width: 100%;
26    height: 4px;
27    background-color: #008000;
28    transition: all .5s;
29}
30.menu-trigger.active span {
31    background-color: #008000;
32}
33.menu-trigger span:nth-of-type(1) {
34    top: 0;
35}
36.menu-trigger.active span:nth-of-type(1) {
37    transform: translateY(12px) rotate(-45deg);
38}
39.menu-trigger span:nth-of-type(2) {
40    top: 12px;
41}
42.menu-trigger.active span:nth-of-type(2) {
43    opacity: 0;
44}
45  .menu-trigger span:nth-of-type(3) {
46    bottom: 0;
47}
48  .menu-trigger.active span:nth-of-type(3) {
49    transform: translateY(-12px) rotate(45deg);
50}
51.overlay {
52    content: "";
53    display: block;
54    width: 0;
55    height: 0;
56    background-color: #008000;
57    position: absolute;
58    top: 0;
59    left: 0;
60    z-index: 2;
61    opacity: 0;
62    transition: opacity .5s;
63  }
64  .overlay.open {
65    width: 100%;
66    height: 100%;
67    opacity: 1;
68  }
69  main {
70    height: 100%;
71    min-height: 100vh;
72    padding: 0 50px;
73    background-color: #008000;
74    transition: all .5s;
75    display: flex;
76    flex-direction: column;
77    justify-content: center;
78  }
79  main.open {
80    transform: translateX(-250px);
81  }
82  main h1 {
83    text-align: center;
84    font-weight: 500;
85  }
86  main p {
87    text-align: center;
88  }
89  .menu-trigger {
90    display: inline-block;
91    width: 36px;
92    height: 28px;
93    vertical-align: middle;
94    cursor: pointer;
95    position: fixed;
96    top: 30px;
97    right: 30px;
98    z-index: 100;
99}
100.menu-trigger span {
101    display: inline-block;
102    box-sizing: border-box;
103    position: absolute;
104    left: 0;
105    width: 100%;
106    height: 4px;
107    background-color: #000;
108    transition: all .5s;
109}
110.menu-trigger.active span {
111    background-color: #ffff;
112}
113.menu-trigger span:nth-of-type(1) {
114    top: 0;
115}
116.menu-trigger.active span:nth-of-type(1) {
117    transform: translateY(12px) rotate(-45deg);
118}
119.menu-trigger span:nth-of-type(2) {
120    top: 12px;
121}
122.menu-trigger.active span:nth-of-type(2) {
123    opacity: 0;
124}
125  .menu-trigger span:nth-of-type(3) {
126    bottom: 0;
127}
128  .menu-trigger.active span:nth-of-type(3) {
129    transform: translateY(-12px) rotate(45deg);
130}
131nav {
132    width: 200px;
133    height: 100%;
134    padding-top: 100px;
135    background-color: #008000;
136    position: fixed;
137    top: 0;
138    right: 0;
139    z-index: 10;
140    transform: translate(250px);
141    transition: all .5s;
142}
143nav.open {
144    transform: translateZ(0);
145}
146nav li {
147    color: #008000;
148    text-align: center;
149    padding: 10px 0;
150}
151</style>
152
153

stylejs
1$function () {
2    $('.menu-trigger').on('click',function(){
3        if($(this).hasClass('active')){
4        $(this).removeClass('active');
5        $('nav').removeClass('open');
6        $('.overlay').removeClass('open');
7        } else {
8        $(this).addClass('active');
9        $('nav').addClass('open');
10        $('.overlay').addClass('open');
11        }
12    });
13    $('.overlay').on('click',function(){
14        if($(this).hasClass('open')){
15        $(this).removeClass('open');
16        $('.menu-trigger').removeClass('active');
17        $('nav').removeClass('open');      
18        }
19    });
20});
21
22

GASjs
1function doGet() {
2  const htmlOutput = HtmlService.createTemplateFromFile("form1").evaluate();
3  return htmlOutput;
4}
5
6function dopost(postdata){
7         var id="スプレッドシートのidが入ります。";
8         var ss=SpreadsheetApp.openById(id);
9         var sh=ss.getSheetByName("output");
10         var today = new Date();
11         today.getHours() + "時" + today.getMinutes() + "分" + ('0' +today.getSeconds()).slice(-2) + "秒";
12  
13         var select1 = document.getElementById("select1")
14         var val1 = select1.value;
15         var select1 = document.getElementById("select2")
16         var val2 = select2.value;
17         var val3=formObject.clientName;
18         var val4=formObject.projectName;
19         var val5=formObject.completionDate;
20         var val6=formObject.remark;
21 
22         sh.getRange(1, 1).setValue(today);
23         sh.getRange(1, 2).setValue(val1);
24         sh.getRange(1, 3).setValue(val2);
25         sh.getRange(1, 4).setValue(val3);
26         sh.getRange(1, 5).setValue(val4);
27         sh.getRange(1, 6).setValue(val5);
28         sh.getRange(1, 6).setValue(val6);
29  
30         sh.appendRow(inputDate,frontName,deskName,clientName,projectName,completionDate,remark);
31  
32         var resultpage=HtmlService.createTemplateFromFile("result")
33         return resultpage.evaluate();
34}