<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">

@charset "UTF-8";

@font-face {
    font-display: swap;
}


@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
body {
    width: 100%;
    margin: 0 auto;
font-family: 'M PLUS 1p', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: justify;
    word-break: break-all;
    color: #ffffff;
    background-color: #000;
    font-size: 15px;
    line-height: 180%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: justify;
    word-break: break-all;
    font-family: 'Hina Mincho', serif;
}




@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Hina+Mincho&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');

a {
z-index:1100;
    color:#fff;
    text-decoration: none;}
a:hover{
    color:rgb(219, 188, 215);
    color:gray;
    color:rgb(209, 209, 167);
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center;
}
shita a:hover, top a:hover{
color:rgb(209, 209, 167);
transition: all .3s;
transform: scale(0, 1);
transform-origin: center;
}




/* メインページボックス */
.box{
    text-align:left;
    max-width: 100%;
    margin: 0 auto;
    z-index:100;
    padding:0 1em;
}


num, ti{
    color:#f1f2f3e6;
}
header, ta, num{
    text-align:center;
    display:block;
}
num{
    font-size: 14px;
    font-family: 'Hina Mincho', serif;
}
ta{
    font-size: 20px;
    letter-spacing: 15px;
    margin: 1em 0 2em 0;
    text-align: justify;
    text-align: -webkit-center;
}
@media screen and (min-width:1024px) {
ta{
    margin: 1em 0 1em 0;
    letter-spacing: 13px;
}
}
ti{
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 1em 2em;
    font-size: 20px;
    padding: 0 10px;
    font-size: 15px;
    font-family: 'Hina Mincho', serif;
}
sec{
    width:100%;
}
kyara{
    text-align: center;
    display: block;
    margin: -1em 0 1em 0;
    color: #b7b7b7;
    letter-spacing: 3px;
}
kyara#h1{
    margin: -0.5em 0 1em 0;
    font-size: 17px;
}



/* 子ページ */
h1 {
    font-family: 'Hina Mincho', serif;
    display: block;
    font-weight: normal;
    font-size: 15px;
    line-height: 190%;
    background: #fff;
    color: #000;
    padding: 5em 7em;
    margin: 5em 5em 0 5em;
}
@media screen and (max-width:1024px) {
h1 {
    font-size: 13px;
    line-height: 200%;
}
}




@media screen and (min-width:1024px) {
.flex{
    display: flex;
    justify-content: center;
}
main .flex{
    margin: 7em 0;
}
main .flex#ti{
    margin: 0 0;
}
}
.flex{
z-index:1000;
}
.flex#ti{
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}


/* インデックス */
main ta{
    font-size:16px;
    letter-spacing: 5px;
}
namae, ue, migi, hidari, shita{
    color: #f1f2f3d1;
}
top a, shita a{
    color#fff;
}
namae{
    font-size: 30px;
    display: block;
    text-align: center;
    letter-spacing: 20px;
    text-shadow: 3px 0px 5px rgb(255, 255, 255), 0 0 3em rgb(241, 255, 39), 0 0 4.2em rgb(229, 255, 0);
}
ue{
    top: 0;
    position: absolute;
    right: 2em;
}
migi{
    right:0;
    position:absolute;
    text-orientation: sideways-right;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    top: 2em;
}
hidari{
    left: -0.5em;
    position: relative;
    bottom: 2em;
    text-orientation: sideways-right;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
shita{
    left:-2em;
    position:relative;
}
top{
    display:block;
    text-align:center;
    margin: -2em 0 2em 0;
}







@media screen and (max-width:1024px) {
    .box#h1{
        padding: 0 0;
    }
body {
    width:100%;
    font-size: 13px;
    line-height: 200%;
}
namae{
margin: 6em auto 4em auto;
    font-size: 27px;
    letter-spacing: 5px;
}
num{
    font-size: 12px;
    display: block;
}
ta{
    margin: 1em 0;
}
sec{
    margin: 7em 0;
    display:block;
}
h1{
    color: #000;
    padding: 1.5em;
    margin: 1em 0 0 0;
}
shita {
    left: -2.5em;
}
top#h1{
    margin: 2em 0 1em 0;
}
pc{
    display:none;
}
sumaho{
    margin: -1em 0 0 0;
    display: block;
}
migi{
top: 10px;
}
ue, migi, hidari, shita{
color: #f1f2f3c4;
}
num, ti{
color: #f1f2f3d4;
}
header{
    margin:8em auto 0 auto;
    padding: 0 1em;
}
kyara{
    margin: 0 0 1.5em 0;
    font-size:16px;
}
}

@media screen and (min-width:1024px) {
    sumaho{
        display:none;
    }
    .paso{
        height: 100vh;
        box-sizing: border-box;
        display: block;
        position: absolute;
        margin: 0 auto;
        right: 0;
        left: 0;
    }
    header {
        height: 70vh;
        top: 15vh;
        position: relative;
    }
namae{
    height: 30vh;
    top: 25vh;
    position: relative;
}
}




img {
    overflow-clip-margin: content-box;
    overflow: clip;
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0 auto;
    display: flex;
    z-index: 1;
}


/* motteke */
.box#motteke {
    margin: 2em auto;
    width: 90%;
}
textarea {
    width: 100%;
    height: 300px;
}
/
/* Templated by Sicknecks. Forbidden to used by other anyone unless my mutual links friends. */
</style>
