>>12
ご反応くださり、ありがとうございます。
教えていただいた通りにHTMLを書き換えたところ、どちらのページも正常に表示されるようになりました…！
サイトのデザインを弄るのが楽しくて、色々なテンプレートサイト様のソースをお借りして自分なりに調べたり学んだりしているのですが、一度ひっかかるとなかなか抜け出せなくて…。しち様を(勝手に)猛烈に尊敬しております。
お騒がせいたしました。お時間を割いていただき、丁寧で分かりやすいご回答、本当にありがとうございました！

>>9
先にメールボックスに関するレス（>>11）をご確認ください。
メールボックスが解決しましたら、以下↓

ノートに関して、


>🔵ノートは『単体式』ですか？『複合式』ですか？
どちらのタイプか分からない場合は、ノートの管理画面トップをご確認ください。
🔻単体式
*　全体レイアウト
*　└ノート画面レイアウト
🔻複合式
*　全体レイアウト
*　├一覧画面レイアウト
*　└ノート画面レイアウト
【一覧画面レイアウト】がなければ『単体式』で、あれば『複合式』です。

ちなみにこれテンプレの配布元さんがたぶん分かるので言えるんですが、このテンプレでしたら『単体式』のほうが改変は極少で済みます。


>▶▶『複合式』なら、
>🔵ノートのHTMLを教えてください
*🔻【全体レイアウト】
*🔻【一覧画面レイアウト】
*　▶上部表示テキスト
*　▶一覧部分
*　▶下部表示テキスト
*🔻【ノート画面レイアウト】
*　▶上部表示テキスト
*　▶ノート部分
*　▶下部表示テキスト

ただ、もし「なるべくテンプレと同じような構成にしたい」のでしたら、『単体式』でノートを作り直すしかないです。
もしも『単体式』で作り直すのであれば、↓のHTMLを入れてみてください。


>▶▶『単体式』なら、
>🔵HTMLを以下で書き換えてください（自動改行なしで）

#🔻【全体レイアウト】
━━━━━━━━━━

<div id="pagetop"><a href="#">top</a></div>
<div class="wrp">
<div class="title">

<div class="menu">
#top_top#
<a href ="">text</a><br>
<span>note</span>
<a href ="">mail</a>
</div>

<div class="top">
<h1>SITE NAME</h1>
<p>https://alicex.jp/★★★★★/</p>
rank >> <a href ="">rank</a> <a href ="">rank</a>
</div>
</div>

<div class="main">
<h2>notebook</h2>
#note#
</div>
</div>

━━━━━━━━━━

#🔻【ノート画面レイアウト】
*　▶上部表示テキスト
━━━━━━━━━━

<!-- ↓入力必須の独自タグ
◆#note_title#
◆#top#
◆##note★(リンク文字)##
-->

━━━━━━━━━━

*　▶ノート部分
━━━━━━━━━━

<div class="note">
<h4>#date#</h4><br>
<p>#title#</p>
#body#
</div>

━━━━━━━━━━

*　▶下部表示テキスト
━━━━━━━━━━

<div class="ft">##prev(prev)####next(next)##
</div>

━━━━━━━━━━


***　入力必須の独自タグについて　***
🟢 #note_title#　：ノート機能の名前
🟢 #top# または #top_トップページへ#　：サイトトップへのリンク
🟢 ##note★(リンク文字)##　：ノートトップへのリンク

上記の独自タグは、入っていないと「必須タグが無い」とエラー文が出て、保存することが不可能になります。
現状はとりあえずコメントアウト（<!-- この中がサイト上では非表示になる -->）を使って入れています。

もちろん本当は非表示にせず本来の用途どおり使用したほうがいいのですが、
どこに入れても邪魔だな……となりそうなら、このままコメントアウトで入れるだけ入れとく手もあります。

なおノートトップへのリンクタグは、「★」部分をノートのID番号に書き換えてください。


***　追記周りについて　***
🟢 追記画面について
ナノ用テンプレには“追記画面”があったと思いますが、
ALICE+ではこの“追記画面”を別個でデザインすることは不可能なので、再現できません。
テンプレにあった“追記画面”のHTMLは入れる場所がないので、忘れてください。

🟢 追記へのリンクについて
テンプレではリンクボタンになっていましたが、ALICE+でこれを再現するのは難しいです。
今回はとりあえずノータッチで、ふつうのテキストリンクとして表示されるようになっています。


>▶▶▶HTMLを書き換えてもデザインが崩れている場合
>🔵【CSSファイル編集】で以下をおこなってください
1️⃣〔□使用するCSSファイル〕を、『下記の内容のCSSを適用』にする
2️⃣編集欄をすべて空にする

『トップページのCSS』が影響してデザインが崩れている可能性があるので、トップページのCSSを適用しないようにします。

・
・
・
とりあえず考えられるHTMLのミスだけ修正した形なので、
「なんかここデザインがおかしい」みたいなのありましたらすみませんです。そのときはまたお教えください〜

>>9
スクショを見る限りでは、原因はHTMLのほうにあるかと……（おそらくALICE+独自タグを書くところが誤っているなど、HTML構造にミスがあります）。
ほかいくつか明確にしておきたい点がありますので、以下ご確認ください。


>🔵テンプレは、ナノ用のものを改変してお使いですか？
ナノ用のテンプレということでしたら、なんとなく原因の見当がつきます。
というか配布元サイトさんがたぶん分かりました。
ので、まずメールボックスを以下に書き換えて、それでテンプレどおりになるかお試しください。

ノートに関しては、次のレスで触れます。


>🔵メールボックス機能のHTMLを以下に書き換えてみてください
（ナノ仕様テンプレをALICE+仕様に変更したら以下になります）

#🔻【ページ編集】
*　▶□上部編集
━━━━━━━━━━

<div id="pagetop"><a href="#">top</a></div>

<div class="wrp">
<div class="title">
<div class="menu">
##top(top)##
<a href ="">text</a><br>
<a href ="">note</a>
<span>mail</span>
</div>

<div class="top">
<h1>SITE NAME</h1>
<p>https://alicex.jp/★★★★★/</p>
rank >>
<a href ="">rank</a>
<a href ="">rank</a>
</div>
</div>
<div class="main">
<h2>mail form</h2>

何かありましたら下記よりご連絡ください。<br>
お返事は<a href="">こちら</a>より行っております。
<div class="box">
<div class="cen">
<h3>mail form</h3>
</div>

━━━━━━━━━━

*　▶□メールボックス枠編集
━━━━━━━━━━

<div class="long"><!-- ▼入力項目 -->

<div class="fm">
name<br>
##mailbox_name##
</div>

<div class="fm">
message<strong>必須</strong><br>
##mailbox_message##
</div>

<!-- ▲入力項目 --></div>
##mailbox_send(send)##

━━━━━━━━━━

*　▶□下部編集
━━━━━━━━━━

</div></div></div>

━━━━━━━━━━

以上を入れて、「なんか入力欄の見た目が変」「やっぱりテンプレどおりの横並びにならない」ということでしたら、以下をご確認ください。
（無事解決したなら以下は読み飛ばしてOKです。回答も不要です）


>🔵入力欄の配置がおかしい／入力欄の増減の仕方が分からない
テンプレで３つだった入力項目を、とりあえず２つにしているのが上記です。
入力欄を増やす or 減らす場合の書き換え方が不明でしたらお気軽にお尋ねください。

とりあえず「（幅広画面時は）２つの入力欄が、横並びになる」ようHTMLを書いていますが、
もし「（幅広画面時も）入力欄が縦に積み重なる」ようにしたい、など入力欄の配置を変えるのでしたら、
HTMLの書き方を変えることで対応できます。


>🔵入力欄のサイズ等がテンプレと違っていて気になる
>▶▶『デフォルトCSS』は有効ですか？無効ですか？
デフォルトCSSが有効の場合は、入力欄のサイズ等がテンプレと異なる状態になるかもしれません。
※有効のままでも、HTMLやCSSをちょっと弄れば入力欄まわりのデザインは整えられます。

とはいえ入力欄のデザインに不具合・不都合がないのであれば、有効／無効どちらでも支障はないと思われます。気にならなければスルーで。



>🔵HTMLを書き換えてもデザインが崩れる（メニューとメインブロックが横並びにならないなど）
>▶▶『トップページのCSS』を使用していますか？
『トップページのCSS』とは、
*��head情報�＝i��ヘッダー情報など�＝j→【CSSファイル編集】
に書いてあるCSSです。

>▶▶▶使用している場合、トップページと同じCSSを使っている他ページ（※）はありますか？
*※【CSSファイル編集】などで『トップページのCSSを適用』を選択しているページ

メールボックスは『トップページのCSS』が強制的に適用されます。（無効にできない）
そして何故か、『トップページのCSS』のほうが、メールボックスのHEAD内styleよりデザインの優先順位が高いんです……。

なので『トップページのCSS』に何か書いてあるなら、メールボックス“だけに”このデザインを適用させるのはなかなか手間です。

この場合は『トップページのCSS』を書き換えたり、CSSを【トップページhead間編集】へ移動したり……といった方法でも解決できるので、
「『トップページのCSS』を弄っても他のページへの影響が出ない or 少ないか」
が分かると、対処を考えやすいです。

>>9
<style type="text/css">

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Quicksand');

@media screen and (min-width: 801px) {

.wrp {
max-width: 1000px;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}

.title{
position: -webkit-sticky;
position: sticky;
top: 50px;
width: 20%;
height: 60%;
}

.main {
right: 0;
width: 70%;
height:auto;
}

.text,.long {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}

.text > .box,.text > .box2 {
width: 40%;
margin: 30px 0 20px;
}

.str {
width: 45%;
}

.fm {
width: 50%;
}

h2 {
padding: 0 10px 10px;
margin: 0 0 30px;
}
}

@media screen and (max-width: 800px) {

.wrp {
max-width: 500px;
}

.title {
max-width: 250px;
margin: 0 auto;
}

.main {
margin: 50px 25px 30px;
}

h2 {
padding: 10px;
margin: 30px 0;
}
}

body {
background: #fff;
color: #555;
font-size: 12px;
font-family: 'Quicksand', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
line-height: 180%;
letter-spacing: 2px;
margin: 0;
}

a {
color: #999;
text-decoration: none;
padding: 0 3px;
}

a:hover, active {
position: relative;
top: 0;
color: #555;
background: #ffb874;
}

h1 {
margin: 20px auto 0;
font-size: 14px;
z-index: 10;
font-weight:200;
text-transform: uppercase;
line-height: 100%;
}

h2 {
text-transform: uppercase;
position: relative;
}

h2::before,h2::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
height: 4px;
}

h2::before {
z-index: 2;
width: 20%;
background-color: #ce9454;
}

h2::after {
width: 100%;
background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #eee 2px, #eee 4px);
background: repeating-linear-gradient(45deg, #fff, #fff 2px, #eee 2px, #eee 4px);
}

h3,h4 {
margin: 0 auto 20px;
padding: 5px 15px;
font-size: 14px;
text-transform: uppercase;
display: inline-block;
}

.box h3 {
background: #ffb874;
}

.box2 h3 {
background: #fff;
}

h4 {
border-bottom: solid 2px #ccc;
}

b {
background: #eee;
padding:0 3px;
font-weight:200;
}

strong {
background: #ce9454;
color:#fff;
padding: 0 5px;
border-radius: 3px;
margin-left: 5px;
font-weight: 200;
}

footer {
border-top: double 3px #eee;
margin: 30px 0 0;
padding-top: 15px;
text-align: center;
}

.wrp {
margin: 50px auto 20px;
}

.menu {
text-align: center;
line-height: 100%;
}

.menu a,.menu span{
color: #555;
font-size: 13px;
width:60px;
text-align:center;
display: inline-block;
margin: 4px 2px;
padding: 24px 0;
text-transform: uppercase;
}

.menu a {
background: #ffb874;
}

.menu span,.menu a:hover {
background-image: linear-gradient(
-45deg,
#fff 25%, #ffb874 25%,
#ffb874 50%, #fff 50%,
#fff 75%, #ffb874 75%,
#ffb874
);
background-size: 10px 10px;
}

.top {
text-align:center;
}

.top p{
color:#eee;
position:relative;
bottom: 24px;
z-index: -1;
letter-spacing: 3px;
margin-bottom: -15px;
}

.box,.box2,.note {
margin: 30px 20px 20px;
padding: 15px;
}

.box,.note:nth-child(2n) {
border: solid 1px #999;
background: #fff;

}

.box2,.note {
border: solid 1px #eee;
background: #eee;
}

.box span,.box2 span {
background: #999;
color:#fff;
padding: 0 5px;
margin-right: 10px;
text-transform: uppercase;
}

.cen {
text-align: center;
}

.note {
position: relative;
}

.note p {
margin:-15px 0 20px 20px;
padding: 5px 10px 0;
color: #999;
border-left: double 3px #ccc;
}

.note:before {
border-top: 20px solid #ffb874;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #ffb874;
top: 0;
left:0;
position:absolute;
content:"";
}

.ri {
text-align: right;
}

.ri a {
background: #555;
color: #fff;
padding: 3px;
width: 100px;
display: inline-block;
text-align: center;
border-radius:3px;
}

.ri a:hover {
position: relatve;
top:1px;
}

.ttl {
display: inline-block;
padding: 2px 10px;
margin-top: 10px;
color: #555;
font-weight:700;
border-left: solid 10px #ce9454;
}

.sec {
font-size:10px;
color:#999;
margin: 5px 0 0 15px;
padding:0 10px 3px;
line-height: 25px;
background-image: linear-gradient(#eee 1px, transparent 1px);
background-size: 25px 25px;
}

.ft {
border-top: double 3px #eee;
margin: 30px 0 0;
padding-top: 15px;
text-align:center;
}

.ft a,.ft span {
margin: 10px;
padding: 3px 15px;
text-transform: uppercase;
}

.ft span {
text-decoration: line-through;
}

input[type],textarea{
-webkit-appearance: none;
font-size: 12px;
font-family: 'Quicksand', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
line-height: 180%;
letter-spacing: 2px;
}

textarea,input[type=text] {
color: #555;
background: #eee;
border: solid 2px #eee;
border-radius: 3px;
margin: 10px 0 20px;
padding: 3px;
box-shadow: none;
}

textarea {
width: 90%;
height: 100px;
}

input[type=text] {
width: 80%;
height: auto;
}

input[type=submit]{
height: 30px;
width: 50%;
color: #fff;
border-radius: 3px;
cursor: pointer;
text-shadow: none;
background: #555;
font-weight: 200;
margin: 0;
border: none;
text-transform: uppercase;
}

#pagetop {
position: fixed;
bottom: 20px;
right: 20px;
background: #ffb874;
width:40px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
z-index: 1;
}

#pagetop a{
color: #555;
display: block;
padding:10px 0;
}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>

$(function(){
$('#pagetop').hide();
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#pagetop').fadeIn();
}
else {
$('#pagetop').fadeOut();
}
});
$('#pagetop').click(function(){
$('html,body').animate({
scrollTop: 0
}, 600);
return false;
});
});

</script>

再三になりますが、テンプレートの表示崩れについて質問をさせてください。

レスポンシブデザインで、タブレット等から見るとメニューが左側にくるのですが(画像1枚目)、ノート機能とメール機能のページが他のページと同じように表示されません(画像2枚目)。

次の書き込みでHAEDの内容を記載しますので、どなたか知恵をお貸しください。他に必要な情報などあれば、追加で書き込みます。

よろしくお願い致します。

>>7
言われた通り、小説機能のHEAD編集画面とトップの共通head編集、指定された場所に<!DOCTYPE html>を上書きしたところ、解決いたしました……！
元々記述されていたものと差違は無いように思えたのですが、一度消して差し替えると変わりました。いったい何が違ったのでしょうか……謎です。
しかし、解決して本当に良かったです。今使用している機能、全ページの記述を一通り書き換えたのですが、それによる影響も特に出ていません。

プレビュー画面や一時休止状態の情報も、大変勉強になりました。実際の画面と見え方に差が出る、そういった仕様があるのですね。

此度も大変お世話になりまして、懇切丁寧に教えて下さり、本当に、本当にありがとうございました！

>>6
#【HEAD編集】の〔□DOCTYPE宣言〕編集欄に、以下を書き込む
━━━━━━━━━━
<!DOCTYPE html>
━━━━━━━━━━
*　何か書き込まれていたら、上記で上書きしてください。
*　上記『<!DOCTYPE html>』しか入っていないことをよく確認してください。余計な文字やスペースが入ると、記述が無効化されてしまいます。
*　〔保存しないでプレビュー〕時には相変わらず肉球がズレて見えますが、プレビューの仕様でそうなるだけです。問題ないので気にせず保存してください。

DOCTYPE宣言が古い or 無記述の状態ゆえに、テンプレ配布元と表示に差異が出ているかもしれません。
そうであるなら、『<!DOCTYPE html>』を書き入れることで解決します。

ざっっくり説明すると、
テンプレは『HTML5（<!DOCTYPE html>）』仕様で作られているのに、
貴サイトには『<!DOCTYPE html>』という記述がないから、
表示に差異が出る……という状態なのだと思われます。

原因がこれなら、〔□DOCTYPE宣言〕編集欄を上記一行にするだけで、表紙・文章画面とも肉球は円の中央にくるはずです。



*****補足*****

>肉球はどこ？
ご推察の通り「<i class="fas fa-paw"></i>」の部分が肉球です。
「Font Awesome」というWebフォントを使用して肉球が表示されています。


>なんでプレビュー画面では肉球が上にずれる？
プレビュー画面では『<!DOCTYPE html>』の記述が無効化されてしまうせいで、
「DOCTYPE宣言が無記述」とブラウザに解釈されるためです。
プレビュー画面と実際のサイト上の表示で差異が出てしまうのは、もうそういう仕様と思って諦めるほかないです……。

あと、【一時休止（メンテナンス画面）】を使用中も同じく「DOCTYPE宣言が無記述」とブラウザに解釈されるため、実際のサイト上の表示とは差異が出ます。そういう仕様以下略……。


>『<!DOCTYPE html>』は他のページにも必要？
あった方がよいです。
というか、この『<!DOCTYPE html>』が書かれていない状態であることに、メリットは現在まずないです。
なので本当なら、サイト全体に『<!DOCTYPE html>』を入れた方がよいのですが……。

とはいえそれで、既存のページがこれまでと違う表示になった！ということが起きても対応が大変かと思うので、取り急いでは
>>「テンプレサイトと同じ表示にならないな？」ということが起きたらまた『<!DOCTYPE html>』を入れてみる。
くらいでもよいかと。
最近のテンプレだと、『HTML5（<!DOCTYPE html>）』前提で作られている可能性が高いので。

>>もしサイト全体に『<!DOCTYPE html>』を入れるのでしたら、
サイト管理トップの〔head情報〕＞【共通head間編集】〔□DOCTYPE宣言〕編集欄に、
━━━━━━━━━━
<!DOCTYPE html>
━━━━━━━━━━
と書いてください。

ここに書いてあれば、DOCTYPE宣言が無記入になっている全ページに『<!DOCTYPE html>』が挿入されます。
ただ、古いDOCTYPE宣言が書かれているページには反映されないので、都度『<!DOCTYPE html>』に書き換えないといけないですが……。

>>5
しち様、ご反応いただき、ありがとうございます。以前もお世話になりました。再び知恵をお貸しいただきたく思います。よろしくお願いします。

>無駄な改行について
自動改行しない設定で、<br>や<p>などの改行系のタグも入っていません。
↓にHTMLを記載しますので、そちらもご確認いただけますと幸いです。

>HTMLについて
表紙画面に記載しています。全体デザインは#novel#のみです。目次画面はいじっていません。

しち様の推測と照らし合わせると、肉球に共通しているのは<i class="fas fa-paw"></i>なのかな、と思うのですが……。

<header>
<h1>honey milk syndrome
<div><i class="fas fa-paw"></i></div>
</h1>
<nav class="tp">
<ul>
<li><a href="">read me</a></li>
<li><a href="">world</a></li>
</ul>
<form action="http://#ID#.#NO#.novel.d.xria.biz/?guid=on" method="post" class="nm"><input type="text" name="n1" value="" placeholder="苗字"><input type="text" name="n2" value="" placeholder="名前"><input type="submit" value="send"><input type="hidden" name="mode" value="set"><input type="hidden" name="page_pass" value=""></form>
</nav>
</header>
<main>
<section>
<h2>01<i class="fas fa-paw"></i>タイトル</h2><a href="">01</a> <a href="">02</a> <a href="">03</a> <a href="">04</a> <a href="">05</a> <a href="">06</a> <a href="">07</a> <a href="">08</a> <a href="">09</a> <a href="">10</a><br>
</section>
</main>

以上になります。

余談なのですが、本文画面にも似たようなデザインで肉球があります。それも同じような形で上にズレます。一応、そちらのHTMLも記載しておきます。

<header>
<h3>
<div><i class="fas fa-paw"></i></div><br>#title#</h3>
</header>
<main>
<article>#text#
<aside>
<h4><i class="fas fa-paw"></i></h4>
<aside></aside>あとがきスペース</aside>
</article>
<nav class="tx">
<ul>
<li><a href="">prev</a></li><i class="fas fa-paw"></i>
<li><a href="">back</a></li><i class="fas fa-paw"></i>
<li><a href="">next</a></li>
</ul>
</nav>
</main>

以上になります。

ご確認、お願いいたします。

>>4
見た感じでは、肉球の後に余計な改行が入っているのでは……？という気がするので、
一度HTMLで、肉球の後ろに余計な改行がないかご確認ください。

>↓それらしいものはない、ということなら
HTML（【表紙画面編集】or【目次画面編集】、【全体デザイン】）はどうなっているでしょうか？

●>>3のスクショが表紙なら【表紙画面編集】、目次なら【目次画面編集】の内容を記述
●【全体デザイン】は『#novel#』しか入っていないなら記述不要

で教えてください。

CSSだけだと、肉球がどこに記述されているのか特定が無理でした。
たぶん　<h1><div>肉球</div></h1>　という感じかな？とは思うのですが……。

>>3
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<style type="text/css">

@import 'https://fonts.googleapis.com/css?family=Sacramento|Short Stack|Kosugi';

*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}

body{
background:#fff;
font-family:'Short Stack', 'Kosugi', '游ゴシック', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
font-weight:normal;
font-size:12px;
letter-spacing:1.55px;
line-height:1.95;
color:#555;
overflow-x:hidden;
}

a{
text-decoration:none;
color:#1eafed;
}

h1, h3{
padding:2em;
width:100vw;
background:repeating-linear-gradient(90deg, #fff, #fff 20px, #cbf1f5 0, #cbf1f5 40px);
font-family:'Sacramento', 'Kosugi', '游ゴシック', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
text-align:center;
text-transform:capitalize;
position:relative;
}

h1 div, h3 div{
background:#cbf1f5;
color:#fff;
border-radius:50%;
}

h1 div{
display:block;
top:88px;
left:50%;
transform:translateX(-50%);
font-size:39px;
line-height:94px;
width:100px;
height:100px;
position:absolute;
border:#fff solid 10px;
z-index:2;
}

h1 div .fas:hover, h3 div .fas:hover{cursor:pointer;}

h1 div .fas:hover{color:#ffc0d0;}

nav{text-align:center;}

.tp ul{
margin:0 2em;
display:flex;
justify-content:space-between;
align-items:flex-end;
}

nav ul li{display:inline-block;}

main{
max-width:500px;
margin:0 auto;
}

section{
margin:2em;
}

h2{
font-size:13px;
font-weight:normal;
color:#905858;
}

h3{
padding:2em;
width:100vw;
background:repeating-linear-gradient(90deg, #fff, #fff 20px, #cbf1f5 0, #cbf1f5 40px);
font-family:'Sacramento';
position:relative;
text-align:center;
text-transform:capitalize;
}

h3 div{
display:inline-block;
font-size:21px;
line-height:50px;
width:60px;
height:60px;
border:#fff solid 8px;
}

h3 div .fas:hover{color:#905858;}

article{margin:2em;}

aside{margin:1em 2em;}

h4{
font-size:21px;
color:#905858;
text-align:center;
}

.tx ul li{margin:0 .5em;}

.tx ul .fas{color:#905858;}

input[type], textarea{
background:#cbf1f5;
font-family:'Short Stack', 'Kosugi', '游ゴシック', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
font-weight:normal;
font-size:12px;
letter-spacing:1.55px;
line-height:1.95;
text-align:justify;
word-break:break-all;
color:#905858;
margin:5px 0;
padding:3px 5px;
width:auto;
height:auto;
border:#905858 solid 2px;
border-radius:4px;
text-shadow:none;
box-shadow:none;
resize:vertical;
outline:none;
vertical-align:middle;
}

input[type=text]{width:150px;}

input[type=submit]{
cursor:pointer;
text-transform:lowcase;
}

.nm input[type]{
margin:2em 3px 1em;
line-height:1.5;
}

.nm input[type=text]{width:70px;}

.nm input[type=submit]{
background:#905858;
color:#cbf1f5;
}

textarea{
width:85%;
height:16ch;
}

::selection{
background:rgba(255, 192, 208, .7);
color:#555;
}

::-moz-selection{
background:rgba(255, 192, 208, .7);
color:#555;
}

</style>