temp-14 | ナノ

info

1ページ完結型のシンプルなテンプレートです。メニューをクリック・タップすると自動でスクロールします。最近グレーとピンクの組み合わせが好きなので取り入れてみました。
色違いはこちら：ネイビー / オレンジ

メニュー以外のリンクはこんなふう、強調文はこんなふう。

about me

サイト名：◯◯◯
管理人：◯◯◯（memo / twitter）
URL：https://◯◯◯

ご用の方や感想はこちらからどうぞ。など

main

リストタグは使用していませんので、長編など数の多いものは専用ページを設けることをおすすめします。

long

ポラーノの広場

ここに長編の説明などが入ります

ファゼーロとロザーロ

ここに長編の説明などが入ります

short

羊飼のミーロ（◯△□）
地主のテーモ（◯△□）
山猫博士のボーガント・デストゥパーゴ（◯△□）
縦並びは末尾にbrタグを付ける（◯△□）
横並びリンク　横並びリンク　横並びリンク

source code

ソースコードを下記からコピペして使ってください。自動改行しないで作成しています。詳しいやり方は使い方メモに書いていますので、自信がない方はお役立てください。

おまけのバナーはこちら。
タイトル部分の画像はこちら。

HEAD内（共通）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Sans JP', sans-serif;
color: #454545;/* ★全体の文字色 */
font-size: 12px;/* ★全体の文字サイズ */
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
background-color: #F4F4F4;/* ★全体の背景色 */
width: 100vw;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
min-height: 100vh;
padding: 40px 25px 0;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 1px dotted #F3789B;/* ★リンク文字の下線の色 */
}

a:hover{
color: #F3789B;/* ★リンクをホバーした時の文字色 */
cursor: pointer;
}

/* 強調文 */
strong{
font-weight: 700;
color: #D80B45;/* ★強調文の文字色 */
border-bottom: 2px solid #D80B45;/* ★強調文の下線の色 */
}

/* ヘッダーメニュー */
header{
width: 100%;
text-align: center
}

.nav{
width: 100%;
display: flex;
justify-content: center;
gap: 25px;
}

.nav li a{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 18px;
color: #F3789B;/* ★ヘッダーメニューの文字色 */
border-bottom: none;
}

.nav li a:hover{
color: #454545;/* ★ヘッダーメニューをホバーした時の文字色 */
}

/* 更新履歴 */
.up{
text-align: left;
width: fit-content;
max-width: 100%;
background-color: #FFF;/* ★更新履歴の背景色 */
padding: 10px 30px;
margin: 30px auto 0;
}

/* ランキング */
.rank{
padding: 10px 0 0;
}

/* 見出し */
h1{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 54px;/* ★サイトタイトルの文字サイズ */
margin-bottom: -15px;
letter-spacing: 0.1em;
color: transparent;
background-image: url(#mtr■_url#);/* ★サイトタイトルの切り抜き画像URLをここに入れる（#から始まる文字列） */
background-repeat: no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}

h2{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 18px;
color: #F3789B;/* ★h2見出しの文字色 */
text-align: center;
line-height: 1.7em;
margin-bottom: 20px;
padding-top: 15px;
width: 140px;
height: 140px;
background-color: #FFF;/* ★h2見出しの背景の丸の色 */
border-radius: 99%;
margin: 0 auto;
position: absolute;
top: -54px;
left: 0;
right: 0;
z-index: -1;
}

.typcn{
color: #F3789B;/* ★h2見出しの上のアイコン色 */
font-size: 17px;
}

h3{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 14px;
color: #454545;/* ★h3見出しの文字色 */
padding: 2px 8px;
background-color: #F4F4F4;/* ★h3見出しの背景色 */
width: fit-content;
margin: 30px 0 5px;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 150px auto 30px;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 60px;
padding: 40px 10%;
background-color: #FFF;/* ★セクションの背景色 */
position: relative;
}

.section+.section{
margin-top: 150px;
}

/* 入力フォームと送信ボタン */
input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
color: #454545;/* ★入力フォームの文字色 */
border: 1px solid #454545;/* ★入力フォームの枠線の色 */
width: 28em;
height: 6.0em;
margin-top: 10px;
}

input:focus, textarea:focus{
outline: none;
height: 6.0em;
background: #F4F4F4;/* ★入力フォームをフォーカスした時の背景色 */
}

input[type="submit"]{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
width: auto;
height: 2.2em;
background-color: #454545;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
border: none;
}

input[type="submit"]:hover{
background-color: #F3789B;/* ★送信ボタンをホバーした時の背景色 */
color: #FFF;/* ★送信ボタンをホバーした時の文字色 */
}

/* 名前変換フォーム */
.dream{
width: 100%;
text-align: left;
margin: 10px 0 20px;
}

.dream input{
width: 8em;
font-size: 11px;
height: 30px;
margin-right: 10px;
padding: 1px 5px 2px;
}

.dream input[type="submit"]{
width: auto;
padding: 5px 10px 5px;
}

/* 長編リスト */
.long a{
border-bottom: none;
color: #454545;/* ★長編タイトルのリンク文字色 */
font-weight: 700;
}

.long a:hover{
color: #F3789B;/* ★長編タイトルのリンク文字をホバーした時の色 */
}

.long+.long{
margin-top: 10px;
}

/* フッター */
footer{
text-align: center;
margin: 120px auto 60px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin: 20px auto 30px;
padding: 40px 20px 0;
}

h1{
font-size: 40px;
}

h2{
line-height: 1.0em;
width: 160px
height: 160px;
top: -60px;
}

.typcn{
font-size: 14px;
}

.section{
padding-left: 6%;
padding-right: 6%;
margin-bottom: 0;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],select,textarea{
width: 100%;
margin-bottom: -20px;
}

input[type="submit"]{
font-size: 12px;
}

.dream input{
width: 8em;
padding: 2px 5px 1px;
}

.dream input[type="submit"]{
padding: 0 10px ;
}

.code{
margin-bottom: 0;
}
}
</style>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.1.2/typicons.min.css" integrity="sha512-/O0SXmd3R7+Q2CXC7uBau6Fucw4cTteiQZvSwg/XofEu/92w6zv5RBOdySvPOQwRsZB+SFVd/t9T5B/eg0X09g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script type="text/javascript">

$(function(){
  $('a[href^="#"]').click(function(){
    var adjust = -80;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

</script>

全体レイアウト

<div class="wrap">

<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<h1>site name</h1>
<ul class="nav">
<li><a href="#1">info</a></li>
<li><a href="#2">main</a></li>
<li><a href="#3">abcdefg</a></li>
</ul>

<div class="rank">
rank : <a href="">xxx</a> / <a href="">yyy</a> / <a href="">zzz</a> 
</div>
<div class="up">
0426 | ◯◯◯◯+1話<br>
0426 | ここに更新履歴など
</div>
</header>

<!-- ↓ここからメインコンテンツ↓ -->
<main>
<div class="section" id="1"><!-- ※id=""に入る数字をヘッダーメニューの#の後の数字と合わせる -->
<h2><span class="typcn typcn-flag"></span><br>info</h2>
<p>ここに説明などを入れてください。<br>
メニュー以外のリンクは<a href="">こんなふう</a>、<strong>強調文はこんなふう</strong>。</p>

<h3>about me</h3>
<p>
サイト名：◯◯◯<br>
管理人：◯◯◯（<a href="">memo</a> / <a href="">twitter</a>）<br>
URL：https://◯◯◯<br><br>
ご用の方や感想はこちらからどうぞ。など<br>
<form action="/■サイトID/form/■メール機能番号/posted" method="post"><textarea cols="30" rows="6" name="Item[2]"></textarea>
　<br>
<input type="submit" value="send" accesskey="1" /></form>
</p>
</div>

<div class="section" id="2"><!-- ※id=""に入る数字をヘッダーメニューの#の後の数字と合わせる -->
<h2><span class="typcn typcn-flag"></span><br>main</h2>
<p>ここにテキストを入れることができます。</p>
<form class="dream" action="/■サイトID/novel/■名前変換機能番号/dream" method="post">
<input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><input type="text" name="DreamID[■名前変換登録番号（2番目に\登録したなら2）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><input type="submit" name="set" value="OK"></form>

<h3>long</h3>
<div class="long"><h4><span class="typcn typcn-chevron-right"></span><a href="■">長編作品のタイトル</a></h4>
<p>ここに長編の説明などが入ります</p></div>
<div class="long"><h4><span class="typcn typcn-chevron-right"></span><a href="■">長編作品のタイトル</a></h4>
<p>ここに長編の説明などが入ります</p></div>

<h3>short</h3>
<a hreh="■">短編のタイトル</a>（◯△□）<br>
<a hreh="■">短編のタイトル</a>（◯△□）<br>
<a hreh="■">縦並びは末尾にbrタグを付ける</a>（◯△□）<br>
<a hreh="■">横並びリンク</a>　<a hreh="■">横並びリンク</a>　<a hreh="■">横並びリンク</a>
</div>

<div class="section" id="3"><!-- ※id=""に入る数字をヘッダーメニューの#の後の数字と合わせる -->
<h2><span class="typcn typcn-flag"></span><br>abcdefg</h2>
<p>ここにテキストが入ります。</p>
</div>
</main>

<!-- ↓ここからフッター↓ -->
<footer>
Template by <a href="https://nanos.jp/mellow100/">mellow.</a>
</footer>

</div>

使い方メモ

下記は使い方のヒントです。読まなくてもできそうな方は無視してください。
・全体レイアウトや◯◯画面レイアウトとはHTMLのことで、簡単に言うと「どんな文字列や画像、リンクを表示させるか」の情報です。文字を書き換えたい時や追加したい時はこちらを編集してください。
・HEAD内とはCSSのことで、色やフォントなどの装飾に関する設定です。見た目を変えない場合は触らなくてOKですが、後述の画像の設定だけは各自で行なっていただく必要があります。
・忘れずに「自動改行しない」設定に変えてください。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< br >に変換して表示」を「しない」にすればOKです（ナノの場合）
・見出し＋本文のセットは<div class=“section”>…</div>で囲むと作れます。「class="section"」を消すと表示が崩れるので注意してください。
・改行はbrを文章の後につけてください。このように→<br>
・見出しはレベル（強調したい度合い）によってh1からh4までありますので必要に応じて使い分けてください。h1はサイトタイトル、旗のアイコンがついた見出しはh2です。
・「■」部分にはすべて正しいURLやIDを入れてください。サイトを公開する時には■が一つも残っていない状態になっている必要があります。
・画像について、このままでは表示されないため各自でナノに登録いただく必要があります。
・このテンプレートで登録が必要な画像は、サイトタイトルの文字で切り抜いている画像1枚です。
・あなたのスマホやPCに保存した画像を編集トップ＞素材管理＞素材アップロードから登録すると、画像URLが取得できます。「URLタグ(URLのみに変換)」と書いてある下の#から始まる文字列です。
・画像の設定のやり方：全体レイアウト内のimgから始まるタグの、「src=""」部分を取得した画像URLに書き換えてください。ソースコードに★印をつけておいたので見つけやすいと思います。
・タグの仕様で分からないことがあれば、まずは調べてみてください。Google検索やナノの助け合い掲示板（https://nanos.jp/nanossupport/bbs/2/）や、タグ・デザイン掲示板（https://nanos.jp/nanossupport/page/8/）が役立ちます。
・ソースコードに誤りや不備があった場合は、お手数ですがお知らせいただけると大変助かります。

色違いverにする場合は下記のソースコードを使用してください。全体レイアウトは全てのverで共通です。

ネイビーver：HEAD内（画像 / バナー）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Sans JP', sans-serif;
color: #FFF;/* ★全体の文字色 */
font-size: 12px;/* ★全体の文字サイズ */
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
background-color: #2C3D50;/* ★全体の背景色 */
width: 100vw;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
min-height: 100vh;
padding: 40px 25px 0;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 1px dotted #4FC9ED;/* ★リンク文字の下線の色 */
}

a:hover{
color: #4FC9ED;/* ★リンクをホバーした時の文字色 */
cursor: pointer;
}

/* 強調文 */
strong{
font-weight: 700;
color: #F76AA6;/* ★強調文の文字色 */
border-bottom: 2px solid #F76AA6;/* ★強調文の下線の色 */
}

/* ヘッダーメニュー */
header{
width: 100%;
text-align: center
}

.nav{
width: 100%;
display: flex;
justify-content: center;
gap: 25px;
}

.nav li a{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 18px;
color: #4FC9ED;/* ★ヘッダーメニューの文字色 */
border-bottom: none;
}

.nav li a:hover{
color: #FFF;/* ★ヘッダーメニューをホバーした時の文字色 */
}

/* 更新履歴 */
.up{
text-align: left;
width: fit-content;
max-width: 100%;
background-color: #1B3246;/* ★更新履歴の背景色 */
padding: 10px 30px;
margin: 30px auto 0;
}

/* ランキング */
.rank{
padding: 10px 0 0;
}

/* 見出し */
h1{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 54px;/* ★サイトタイトルの文字サイズ */
margin-bottom: -15px;
letter-spacing: 0.1em;
color: transparent;
background-image: url(#mtr■_url#);/* ★サイトタイトルの切り抜き画像URLをここに入れる（#から始まる文字列） */
background-repeat: no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}

h2{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 18px;
color: #4FC9ED;/* ★h2見出しの文字色 */
text-align: center;
line-height: 1.7em;
margin-bottom: 20px;
padding-top: 15px;
width: 140px;
height: 140px;
background-color: #1B3246;/* ★h2見出しの背景の丸の色 */
border-radius: 99%;
margin: 0 auto;
position: absolute;
top: -54px;
left: 0;
right: 0;
z-index: -1;
}

.typcn{
color: #4FC9ED;/* ★h2見出しの上のアイコン色 */
font-size: 17px;
}

h3{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 14px;
color: #FFF;/* ★h3見出しの文字色 */
padding: 2px 8px;
background-color: #2C3D50;/* ★h3見出しの背景色 */
width: fit-content;
margin: 30px 0 5px;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 150px auto 30px;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 60px;
padding: 40px 10%;
background-color: #1B3246;/* ★セクションの背景色 */
position: relative;
}

.section+.section{
margin-top: 150px;
}

/* 入力フォームと送信ボタン */
input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
color: #FFF;/* ★入力フォームの文字色 */
border: 1px solid #FFF;/* ★入力フォームの枠線の色 */
width: 28em;
height: 6.0em;
margin-top: 10px;
}

input:focus, textarea:focus{
outline: none;
height: 6.0em;
background: #2C3D50;/* ★入力フォームをフォーカスした時の背景色 */
}

input[type="submit"]{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
width: auto;
height: 2.2em;
background-color: #FFF;/* ★送信ボタンの背景色 */
color: #2C3D50;/* ★送信ボタンの文字色 */
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
border: none;
}

input[type="submit"]:hover{
background-color: #4FC9ED;/* ★送信ボタンをホバーした時の背景色 */
color: #FFF;/* ★送信ボタンをホバーした時の文字色 */
}

/* 名前変換フォーム */
.dream{
width: 100%;
text-align: left;
margin: 10px 0 20px;
}

.dream input{
width: 8em;
font-size: 11px;
height: 30px;
margin-right: 10px;
padding: 1px 5px 2px;
}

.dream input[type="submit"]{
width: auto;
padding: 5px 10px 5px;
}

/* 長編リスト */
.long a{
border-bottom: none;
color: #FFF;/* ★長編タイトルのリンク文字色 */
font-weight: 700;
}

.long a:hover{
color: #4FC9ED;/* ★長編タイトルのリンク文字をホバーした時の色 */
}

.long+.long{
margin-top: 10px;
}

/* フッター */
footer{
text-align: center;
margin: 120px auto 60px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin: 20px auto 30px;
padding: 40px 20px 0;
}

h1{
font-size: 40px;
}

h2{
line-height: 1.0em;
width: 160px
height: 160px;
top: -60px;
}

.typcn{
font-size: 14px;
}

.section{
padding-left: 6%;
padding-right: 6%;
margin-bottom: 0;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],select,textarea{
width: 100%;
margin-bottom: -20px;
}

input[type="submit"]{
font-size: 12px;
}

.dream input{
width: 8em;
padding: 2px 5px 1px;
}

.dream input[type="submit"]{
padding: 0 10px ;
}

.code{
margin-bottom: 0;
}
}
</style>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.1.2/typicons.min.css" integrity="sha512-/O0SXmd3R7+Q2CXC7uBau6Fucw4cTteiQZvSwg/XofEu/92w6zv5RBOdySvPOQwRsZB+SFVd/t9T5B/eg0X09g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script type="text/javascript">

$(function(){
  $('a[href^="#"]').click(function(){
    var adjust = -80;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

</script>

オレンジver：HEAD内（画像 / バナー）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Sans JP', sans-serif;
color: #2F3900;/* ★全体の文字色 */
font-size: 12px;/* ★全体の文字サイズ */
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
background-color: #FCFFF2;/* ★全体の背景色 */
width: 100vw;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
min-height: 100vh;
padding: 40px 25px 0;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 1px dotted #FF7600;/* ★リンク文字の下線の色 */
}

a:hover{
color: #FF7600;/* ★リンクをホバーした時の文字色 */
cursor: pointer;
}

/* 強調文 */
strong{
font-weight: 700;
color: #FC357A;/* ★強調文の文字色 */
border-bottom: 2px solid #FC357A;/* ★強調文の下線の色 */
}

/* ヘッダーメニュー */
header{
width: 100%;
text-align: center
}

.nav{
width: 100%;
display: flex;
justify-content: center;
gap: 25px;
}

.nav li a{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 18px;
color: #FF7600;/* ★ヘッダーメニューの文字色 */
border-bottom: none;
}

.nav li a:hover{
color: #2F3900;/* ★ヘッダーメニューをホバーした時の文字色 */
}

/* 更新履歴 */
.up{
text-align: left;
width: fit-content;
max-width: 100%;
background-color: #F4FCCD;/* ★更新履歴の背景色 */
padding: 10px 30px;
margin: 30px auto 0;
}

/* ランキング */
.rank{
padding: 10px 0 0;
}

/* 見出し */
h1{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 54px;/* ★サイトタイトルの文字サイズ */
margin-bottom: -15px;
letter-spacing: 0.1em;
color: transparent;
background-image: url(#mtr■_url#);/* ★サイトタイトルの切り抜き画像URLをここに入れる（#から始まる文字列） */
background-repeat: no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}

h2{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 18px;
color: #FF7600;/* ★h2見出しの文字色 */
text-align: center;
line-height: 1.7em;
margin-bottom: 20px;
padding-top: 15px;
width: 140px;
height: 140px;
background-color: #F4FCCD;/* ★h2見出しの背景の丸の色 */
border-radius: 99%;
margin: 0 auto;
position: absolute;
top: -54px;
left: 0;
right: 0;
z-index: -1;
}

.typcn{
color: #FF7600;/* ★h2見出しの上のアイコン色 */
font-size: 17px;
}

h3{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
font-size: 14px;
color: #FF7600;/* ★h3見出しの文字色 */
padding: 2px 8px;
background-color: #FCFFF2;/* ★h3見出しの背景色 */
width: fit-content;
margin: 30px 0 5px;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 150px auto 30px;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 60px;
padding: 40px 10%;
background-color: #F4FCCD;/* ★セクションの背景色 */
position: relative;
}

.section+.section{
margin-top: 150px;
}

/* 入力フォームと送信ボタン */
input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
color: #2F3900;/* ★入力フォームの文字色 */
border: 1px solid #2F3900;/* ★入力フォームの枠線の色 */
width: 28em;
height: 6.0em;
margin-top: 10px;
}

input:focus, textarea:focus{
outline: none;
height: 6.0em;
background: #FCFFF2;/* ★入力フォームをフォーカスした時の背景色 */
}

input[type="submit"]{
font-family: 'Staatliches', 'Noto Sans JP', sans-serif;
width: auto;
height: 2.2em;
background-color: #2F3900;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
border: none;
}

input[type="submit"]:hover{
background-color: #FF7600;/* ★送信ボタンをホバーした時の背景色 */
color: #FFF;/* ★送信ボタンをホバーした時の文字色 */
}

/* 名前変換フォーム */
.dream{
width: 100%;
text-align: left;
margin: 10px 0 20px;
}

.dream input{
width: 8em;
font-size: 11px;
height: 30px;
margin-right: 10px;
padding: 1px 5px 2px;
}

.dream input[type="submit"]{
width: auto;
padding: 5px 10px 5px;
}

/* 長編リスト */
.long a{
border-bottom: none;
color: #2F3900;/* ★長編タイトルのリンク文字色 */
font-weight: 700;
}

.long a:hover{
color: #FF7600;/* ★長編タイトルのリンク文字をホバーした時の色 */
}

.long+.long{
margin-top: 10px;
}

/* フッター */
footer{
text-align: center;
margin: 120px auto 60px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin: 20px auto 30px;
padding: 40px 20px 0;
}

h1{
font-size: 40px;
}

h2{
line-height: 1.0em;
width: 160px
height: 160px;
top: -60px;
}

.typcn{
font-size: 14px;
}

.section{
padding-left: 6%;
padding-right: 6%;
margin-bottom: 0;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],select,textarea{
width: 100%;
margin-bottom: -20px;
}

input[type="submit"]{
font-size: 12px;
}

.dream input{
width: 8em;
padding: 2px 5px 1px;
}

.dream input[type="submit"]{
padding: 0 10px ;
}

.code{
margin-bottom: 0;
}
}
</style>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.1.2/typicons.min.css" integrity="sha512-/O0SXmd3R7+Q2CXC7uBau6Fucw4cTteiQZvSwg/XofEu/92w6zv5RBOdySvPOQwRsZB+SFVd/t9T5B/eg0X09g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script type="text/javascript">

$(function(){
  $('a[href^="#"]').click(function(){
    var adjust = -80;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

</script>