<meta charset="UTF-8"><!-- 文字コードの指定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!-- レスポンシブ用 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald&display=swap"><!-- GoogleFonts -->

<style type="text/css">
/* フォントのライセンス表記 */
/*
'Oswald' is licensed under the Open Font License.

*/

/* リセットCSS */
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bolder}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}


/* 基本設定 */
:root {
--mainColor: #89b8cd;
--lightColor: #cfe2eb;
--darkColor: #0d405e;
}
html {
background: transparent;
font-size: 62.5%;
}
body {
min-height: 100vh;
background: #fff;
font-size: 1.3rem;
font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
letter-spacing: 0.2em;
line-height: 1.8;
}
a {
text-decoration: none;
}
ul,
ol {
list-style: none;
}
.mainHeader,
h2,
h3,
h4 {
font-family: 'Oswald', sans-serif;
}
h2 {
padding: 5px 0;
margin: 15px 0 10px;
font-size: 1.2em;
font-weight: normal;
text-align: center;
}
h2::after {
content: '';
display: block;
width: 2px;
height: 15px;
margin: 10px auto 10px;
border-left: var(--mainColor) solid 2px;
box-sizing: border-box;
}
h2:first-of-type {
margin-top: 0;
}
h3 {
display: flex;
align-items: center;
margin: 20px 0 15px;
font-weight: normal;
}
h3 > span {
display: inline-block;
padding: 0 10px 0 20px;
background: var(--mainColor);
color: #fff;
line-height: 25px;
}
h3::after {
content: '';
display: inline-block;
width: 25px;
height: 25px;
margin-right: 1rem;
background: linear-gradient(-45deg, #fff0 50%, var(--mainColor) 50%);
}
h4 {
margin: 10px;
}

em {
border-bottom: var(--darkColor) dashed 2px;
font-style: normal;
}
strong {
color: var(--darkColor);
background: var(--lightColor);
}


/* フォーム関連 */
input[type],
textarea {
padding: 3px;
border: #e4eaec solid 1px;
color: inherit;
font-family: inherit;
font-size: 95%;
letter-spacing: .1em;
}
.enter {
margin-right: 1em;
}
form .button {
padding: 3px 1rem;
margin-right: .5em;
background: var(--mainColor);
cursor: pointer;
}

/* メールフォーム */
.mailForm .enter {
width: 60%;
min-width: 350px;
margin-bottom: .5em;
}
.mailForm textarea.enter {
height: 100px;
}

/* 名前変換フォーム */
.nameChange .enter {
width: 10em;
}


/* 段落、余白 */
p {
padding: 0 2em;
}
.box {
position: relative;
padding: 40px 30px 60px;
margin: 100px 0;
background: #ffffffc0;
border-radius: 1px;
box-sizing: border-box;
}
.box::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: url('メイン画像URL') center / cover var(--lightColor);
}

.space {
margin: 30px 2em 40px;
}

.pageWrap {
padding: 10px 0;
background: center / cover #fff;
background-image: linear-gradient(170deg, #fff0 60vh, #e4eaec9f 60vh), url('メイン画像URL');
}
.textWrap {
min-height: 100vh;
background-image: linear-gradient(170deg, #e4eaec9f 60vh, #e4eaec9f 60vh), url('メイン画像URL');
}

.contentsWrap {
width: 800px;
margin: auto;
color: #555b5e;
}
.contentsWrap a {
color: #6badc7;
}
.contentsWrap a:hover {
opacity: .6;
}



/* 小説 */
.novel a:visited {
color: #46788b;
}
.longInfo {
margin: 0 1em;
color: #797973;
font-size: 1rem;
}
.new a {
text-decoration: underline;
}

/* 画像無しリスト */
.longList li {
margin: 1em 0;
}
.longList li a {
font-size: 1.2em;
}

/* 画像ありリスト */
.longList2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 30px;
width: 90%;
margin: 30px auto;
}
.longList2 li {
display: flex;
flex-direction: column;
align-items: center;
}
.longList2 li a {
text-align: center;
}

.longList2 .longImage {
display: block;
position: relative;
width: 100px;
height: 100px;
margin: 0 auto 1em;
background: #eee;
overflow: hidden;
}
.longImage > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.longImage::before,
.longImage::after {
content: '';
display: block;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
border: #fff solid 1px;
}
.longImage::before {
top: 8px;
left: 8px;
}
.longImage::after {
top: 12px;
left: 12px;
}
.light::before,
.light::after {
border-color: #c0c0c0;
}

/* ↓クラスを付ければ背景色などを個別に変更できます */
.long_2 .longImage {
background: #eeedeb;
}


/* 短編リスト */
.shortList {
columns: 2;
}
.shortList li {
margin-bottom: 5px;
}
.shortList li > span {
margin-left: 1rem;
font-size: .9em;
}
.shortList li > .left {
margin: 0 1rem 0 0;
}


/* 本文ページ */
.text {
width: 700px;
margin: 10vh auto;
font-size: 1.4rem;
line-height: 200%;
}
.text p {
text-indent: 1em;
}
.atogaki {
padding: 1em;
margin: 20px;
border: var(--lightColor) solid 1px;
color: #777;
font-size: .8em;
}



/* ヘッダー */
.mainHeader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.headerBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 350px;
height: 350px;
padding: 10px;
margin: 30px 0;
background: var(--mainColor);
box-shadow: 0 0 10px #dddddd66;
box-sizing: border-box;
color: #fff;
}
.headerBox > * {
position: relative;
z-index: 2;
}
.headerBox::before,
.headerBox::after {
content: '';
display: block;
position: absolute;
width: calc(100% - 50px);
height: calc(100% - 50px);
border: #fff solid 1px;
}
.headerBox::before {
top: 22px;
left: 22px;
}
.headerBox::after {
top: 28px;
left: 28px;
}


.siteTitle {
position: relative;
font-size: 2.5em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
z-index: 2;
}
.siteInfo {
padding: 10px 0;
text-align: center;
}
.siteTitle > span,
.siteInfo > span {
color: var(--darkColor);
}



/* ナビゲーション */
.mainNavWrap {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
transition: .5s;
}
.mainNav {
display: flex;
justify-content: flex-end;
font-family: 'Oswald', sans-serif;
box-sizing: border-box;
}
.mainNav ul {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px;
}
.mainNav li {
margin: 0 1em;
}
.mainNav li a {
padding: 5px;
color: #3e4346;
font-size: 1.2em;
}
.mainNav li a:hover {
color: var(--mainColor);
}

.navInfo {
padding: 10px 50px 0 100px;
margin-right: auto;
}
h1 {
font-size: 2em;
font-weight: normal;
}
.url {
color: var(--darkColor);
font-size: 1rem;
vertical-align: middle;
}



/* フッター（削除OK※デフォルト非表示） */
.mainFooter {
display: none;
margin: 5vh 0;
color: #666;
font-size: 1rem;
text-align: center;
opacity: .5;
}
.mainFooter a {
color: #89b8cd;
}



/* PC版非表示用 */
.mobile {
display: none;
}



/* レスポンシブ調整用 */
@media (max-width:1200px) {
body {
font-size: 1.2rem;
}
p {
padding: 0 1em;
}
.box {
margin: 50px 0;
}
.space {
margin: 30px 1em 40px;
}
.contentsWrap {
width: 80%;
max-width: 700px;
min-width: 200px;
}
.longList2 {
gap: 20px;
}
.longList2 li {
margin: 0;
}
.text {
width: 90%;
max-width: 600px;
min-width: 200px;
margin: 50px auto;
font-size: 1em;
}
.atogaki {
margin: 20px 10px;
font-size: .9em;
}
.mainHeader {
position: static;
width: 100%;
box-sizing: border-box;
}
.headerBox {
width: 300px;
height: 300px;
}
.navInfo {
padding-left: 40px;
}
}



（続きます）