話題としてはカスタマイズです。保険で（その１：CSS）としましたが続くのかどうかわかりません。
個人としては「ほかになんかあったけ？」とたかを括っておりますが、’function.php’をおさらいしても良いのかもしれません。
基本的には、あさまテーマ（実際は子テーマ「あさまっこ」）のままの構成で利用していただくことを希望してます。よって、値を調整するとよかろうCSSの箇所を紹介いたします。自らのためにも…。
というわけで、作業に取りかかりやすいように「あさまっこテーマの圧縮していないメインCSS」をあさま開発サイトのダウンロードページにアップしましたので、ダウンロードして利用いただければ幸いです。
CSSはそのまま、あさまっこテーマ（asamitoディレクトリ）内の「css/asamito.css」と差し替えてもそのまま動作するはずです。
366行目あたりから始まる「ROOT VALUE」の内容を変更すると、フォントやフォントサイズ、レスポンシブサイズ、色彩、ウェブアイコンのカスタイマイズが可能です。
以下確認までカスタマイズ当該項目「:root」の内容です。
/*********************************************************
ROOT VALUE
*********************************************************/
:root {
/* FONTS */
--baseFnt:"Noto Sans JP","Noto Sans",sans-serif;
--headFnt:"Kiwi Maru","Quicksand",sans-serif;
--cntsFnt:"Kiwi Maru","Quicksand",sans-serif;
--monoFnt:"Source Code Pro","Noto Sans JP",monospace;
--cntSizePx:16px;
--cntSize:1.6rem;
--cntLineH:1.6em;
--codeSizePx:14px;
--codeSize:1.4rem;
--codeLineH:1.8em;
--noteSizePx:12px;
--noteSize:1.2rem;
--noteLineH:1.4em;「:root」の途中ですが、ここまでがフォントとフォントサイズに関する初期設定です。
フォントは、function.phpの「サイトで利用するWebフォントを連想配列にて登録する。（任意変数名=>URLとパラメータ）」記述下、40行目以下の連想配列にて利用書体を登録する必要があります。注意してください。
/* WIDTH */
--minWidth:320px;
--maxWidth:1280px;
--maxPostWidth:720px;
--maxPageAdWidth:728px;ここまでがレスポンシブのためのサイズ初期設定です。ここを変更するほどのことはないと想定してます。
/* Theme's Identity Colores */
--thmClr:rgb(51, 119, 153);
--littleThmClr:rgba(51, 119, 153, 0.05);
--bitThmClr:rgba(51, 119, 153, 0.10);
--someThmClr:rgba(51, 119, 153, 0.5);
--paleThmClr:rgb(211, 228, 239);
--lightThmClr:rgb(180, 209, 228);
--reverseThmClr:rgb(204, 187, 136);
--attentionThmClr:rgb(255, 157, 51);
--AsamaClr:rgb(0, 37, 104);
/* BackGround Colores */
--bkGradient:linear-gradient(to bottom,rgb(241,238,226) 0%, rgb(211,221,228) 100%);
/* Stiky Element's Colors */
--StkyUpBgClr:rgb(255, 157, 51, 0.80);
--StkyLwBgClr:rgba(147, 176, 255, 0.80);
--StkyAnkrClr:rgba(0, 119, 255, 0.80);
--StkyVstdClr:rgb(96, 119, 153, 0.80);
--StkyOverClr:rgba(255, 43, 114, 0.80);
/* Text Colores */
--baseClr:rgb(47, 72, 79);
--ankrClr:crimson;
--vstdClr:RosyBrown;
--overClr:rgb(8, 68, 221);
--headClr:var(--AsamaClr);
--leadClr:darkslateblue;
--noteClr:saddlebrown;
--markRed:rgb(233, 41, 0);
--quotClr:rgb(85, 85, 102);
/* Black & White Colores */
--snowGry:whitesmoke;
--paleGry:rgb(238, 238, 238);
--silverGry:silver;
--plumbGry:darkgray;
--mildGry:gray;
--dulGry:dimgray;
--littleBlk:rgba(0, 0, 0, 0.03);
--bitBlk:rgba(0, 0, 0, 0.10);
--lessBlk:rgba(0, 0, 0, 0.35);
--someBlk:rgba(0, 0, 0, 0.50);
--moreBlk:rgba(0, 0, 0, 0.65);
--mostBlk:rgba(0, 0, 0, 0.80);
--pureBlk:black;
--bitWht:rgba(255, 255, 255, 0.17);
--lessWht:rgba(255, 255, 255, 0.35);
--someWht:rgba(255, 255, 255, 0.50);
--moreWht:rgba(255, 255, 255, 0.65);
--mostWht:rgba(255, 255, 255, 0.80);
--pureWht:white;
/* Interraction & Form Elements Colors */
--dndAreaBk:var(--paleGry);
--dndAreaHO:rgba(255, 0, 0, 0.1);
--tabBackHO:var(--dndAreaHO);
--tabBorderA:rgba(133, 78, 54, 0.5);
--tabBorderC:rgba(192, 96, 54, 0.5);
--tabColorC:rgba(133, 78, 54, 0.9);
--btnBorderBlu:dodgerblue;
--btnBorderRed:crimson;
--btnBorderGrn:seagreen;
--btnGradientR:linear-gradient(to bottom, rgb(216,130,180) 0%,rgb(216,130,180) 45%,rgb(183,105,134) 50%,rgb(188,105,139) 50%,rgb(229,195,215) 100%);
--btnGradientO:linear-gradient(to bottom, rgb(255, 157, 51) 0%,rgb(255, 157, 51) 45%,rgb(207, 128, 42) 50%,rgb(230, 143, 51) 50%,rgb(255, 193, 128) 100%);
--btnGradientG:linear-gradient(to bottom, rgb(180,216,130) 0%,rgb(180,216,130) 45%,rgb(139,183,105) 50%,rgb(139,188,105) 50%,rgb(215,229,195) 100%);
--btnGradientB:linear-gradient(to bottom, rgb(130,180,216) 0%,rgb(130,180,216) 45%,rgb(105,139,183) 50%,rgb(105,139,188) 50%,rgb(195,215,229) 100%);
--slctGradient:linear-gradient(to bottom, rgb(196,196,196) 0%,rgb(196,196,196) 45%,rgb(183,183,183) 50%,rgb(188,188,188) 50%,rgb(228,228,228) 100%);ここまでが色彩に関する初期設定です。これらの項目によって希望のサイトの印象に変更していけるでしょう。
/* WebIcons GOOGLE ICONS */
--rss:'\e0e5';
--search:'\e8b6';
--close:'\e5cd';
--menu:'\e5d2';
--edit:'\e3c9';
--publish:'\e255';
--arrowBack:'\e5c4';
--arrowForward:'\e5c8';
--arrowUpward:'\e5d8';
--arrowEast:'\f1df';
--moreHoriz:'\e5d3';
--skipPrevious:'\e045';
--skipNext:'\e044';
--alignBttm:'\e258';
--alignTop:'\e25a';
/* new comer */
--more:'\e619';
--Bookmark:'\e866';
--Category:'\e574';
--summarize:'\f071';
/* customized */
--RadioBtnUnChecked:'\e836';
--RadioBtnChecked:'\e837';
--CheckBoxUnChecked:'\e835';
--CheckBoxChecked:'\e834';
--expandMore:'\e5cf';
--arrowDropDown:'\e5c5';
--keyboardDoubleArrowDown:'\ead0';
/* WebIcons HUSTLE_ICONS */
--hustlemouse:'\e377';
--schopme:'\e378';
--inc379:'\e379';
--museum:'\e401';
--dropDown:'\e402';
--upBarArrw:'\e403';
--dwnBarArrw:'\e404';
--clipboard:'\e405';
--facebook:'\e901';
--twitter:'\e902';
--x:'\e902';
--instagram:'\e903';
--bkInstagramGrd:linear-gradient(45deg,#fdd91d 0%,#ec1c24 50%,#a43a94 100%);
--youtube:'\e904';
--YouTubeClr:#f00;
}「:root」の終端です。
ここまでがウェブアイコンの初期設定です。これも変更を想定しておりません。加えることがあるやもしれません。
あさま親子丼セット内のCSSではエスケープ文字列が豆腐マークになってしまっています。あしらいのために確認して初めて気がつきました。（かるくショックでした。）
どうやら’Visual Studio Code’を使ってSASSから出力する際にそうなってしまうようです。
ダウンロード用のCSSには元のSASSからエスケープ文字列を持ってきてありますので、表示が異なることに了解ください。
「WebIcons GOOGLE ICONS」から下は「Google Material Icons」をあさまテーマ本体のPHPで参照、利用してます。
「WebIcons HUSTLE_ICONS」から下は自作のウェブアイコン「hustleIcon」をあさまテーマ本体のCSSで参照、利用してます。
インスタグラムのグラデーションを手作業で再現している「涙ぐましい？」徹底ぶりをご堪能ください。
つぎにページの左上に設置するロゴマークの設定です。
同じくCSSの1,054行目あたりに次のように記述があります。
header.page article[name=Pennant] div.logo a.mark, header.page article[name=Pennant] div.logo span.mark {
display: inline-block;
width: 8rem;
height: 2.4rem;
margin-right: 0.56em;
background-image: url(./../assets/svg/logo_normal.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 100% 100%;
}「あさま」と「あさまっこ」のロゴマークは横長なので、限定される高さ指定「height: 2.4rem;」に合わせて自由の効く幅の指定を「width: 8rem;」と算出して設定してます。参考まで、あさまでは2.4remは24px換算になります。8remは80pxということです。rem単位で指定されることを推奨いたします。
「logo_normal.svg」を差し替えるときに、その画像の縦横比から幅を算出して設定ししてください。
以上がCSSによるカスタマイズになります。
自分でも、本サイトと株式会社379で利用してますが、細かいつまらん調整を除き、概ねこれらの調整だけで済ませています。そかさ。