@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Shippori+Mincho&family=Zen+Kaku+Gothic+New&display=swap');
*{margin: 0; padding: 0;}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
letter-spacing: 2.4px;
line-height: 2;
font-family: "Zen Kaku Gothic New", sans-serif;
text-align: center;
-webkit-text-size-adjust: 100%;
}
article{
width: 100vw;
margin: 0 auto;
}
section {
height: 100vh;
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
/* リンク */
a {
position: relative;
display: inline-block;
padding: .1em;
text-decoration: none;
color: #346480;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: #72a7be;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
a:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
a:visited{
color:#346480;
}
a:hover{
color:#e2c7a1;
}
/* TOP */
#top{
background-color: #346480;
}
#top a {
position: relative;
display: inline-block;
padding: .1em;
text-decoration: none;
color:#eaeff4;
}
#top a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: #eaeff4;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#top a:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
#top a:visited{
color: #eaeff4;
}
#top a:hover{
color:#e2c7a1;
}
.ttl_box{
width: 400px;
height: auto;
line-height: 1;
letter-spacing: 5px;
border: solid #fff 2px;
padding: 15px;
text-align: center;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 20px;
color: #eaeff4;
}
/* box */
.box{
justify-content: center;
display:flex;
flex-flow: column;
margin-top: 0;
}
.box2{
padding: 15px;
justify-content: center;
display:flex;
flex-flow: column;
}
/* リスト */
.list{
display: flex;
width: 300px;
justify-content: space-between;
}
ul{
padding-left: 0%;
margin-top: 20px;
text-align: left;
}
li{
list-style-type: none;
margin: 0;
font-size: 13px;
}
/* TOPへ戻るリンク */
.go_top{
position:fixed;
z-index:1;
background:#346480CC;
width: 30px;
border-radius: 10px;
text-decoration:none;
font-size:15px;
text-align:center;
color:#e2c7a1CC;
padding:10px 10px;
right:20px;
bottom:20px;
}
.go_top a {
display: inline-block;
text-decoration: none;
color:#e2c7a1;
}
.go_top a::after {
background-color: transparent;
}
/* contents */
/* 1 数を増やす時はここをコピペして増やしてください */
#one{
background: #fff;
}
/* 2 */
#two{
background-color: #f9f9f9;
}
/* 3 */
#three{
background-color: #fff;
}
/* 小説部分 */
.novel{
width: 700px;
height: 750px;
font-size: 13px;
text-align: left;
overflow-y: scroll;
letter-spacing: 3px;
line-height: 2;
}
p{
padding: 15px;
}
/* 装飾 */
mark{
background-color: #e2c7a1;
}
h1{
border-bottom: solid 3px #346480;
font-size: 16px;
padding-left: 10px;
}
span{
background-image: repeating-linear-gradient(-45deg,#e2c7a1 0, #e2c7a1 2px,transparent 3px, transparent 6px);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 35%;
}
textarea{
width: 300px;
height: 125px;
border: solid 1px #ddd;
}
/* footer（削除OK） */
footer{
text-align: center;
font-size: 12px;
padding: 15px;
}
/* メディアクエリ */
@media screen and (max-width:758px){
.ttl_box{width: 60%; font-size: 50%;}
.novel{
width: 95%;
height: 575px;
margin-top: -25px;
}
.list{
display: inline-block;
vertical-align: top;
margin-top: 20px;
text-align: left;
width: auto;
}
.list ul {
display: block;
margin: 0;
}
}