@charset "UTF-8";

html {
    font-size: 100%;
}
body {
    background-color: #141414;
    margin: 0;
}
a {
    text-decoration: none; /*アンダーラインを消す*/
}
a:visited {
    color: inherit /*a、つまりリンク訪問後のイベントで色を元々の色と同じのままにする*/
}
img {
    max-width: 100%; /*100%にすることではみ出し防止*/
}
li {
    list-style: none; /* linkの前に出てくる点(e.g. "・ListItem"の"・")を消す*/
}

/*コンテンツ幅*/
.wrapper {
    max-width: 980px;
    padding: 0 22px;
    margin: 0 auto;
}

/*read moreボタン*/
.link-more {
    font-size: 14px;
    position: relative;
}
.link-more::after {
    position: absolute;
    top: 54%;
    right: -12px;
    width: 7px;
    height: 7px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
.link-more:hover {
    text-decoration: underline;
}

/*-------------------------------------------
Paper
-------------------------------------------*/
.divb5 {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden; /*はみ出したときに行う処理, hiddenは隠す*/
    text-overflow: ellipsis; /*文字はみ出した部分省略*/
    box-sizing:border-box; /*はみ出し防止*/
    background-color: antiquewhite;
    width: 500px;
    height: 100%;
    font-size: 10.5pt;
    color: #050505;
    font-family: "LinuxLibertine", serif;
    padding: 50px 40px 20px 40px;
    text-align: left;
    filter: blur(0.5px);
    position:relative;
}
.divb5::first-letter {
    font-size: 20pt;
}
/*-------------------------------------------
Font
-------------------------------------------*/
@font-face {
    font-family: 'LinuxLibertine';
    src: url('../font/LinuxLibertine/LinLibertine_DRah.ttf');
}
/*-------------------------------------------
Header
-------------------------------------------*/

#header {
    background-color: #1d1d1f;
    display: flex;
    margin: 0px auto;
    padding-left: 22px;
    padding-right: 22px;
    z-index: 10;
}
#header .title {
    z-index: 11;
    font-size: medium;
    font-family: "LinuxLibertine", serif;
    opacity: 0.8;
}

#header .title:hover {
    opacity: 1;
}


/*-------------------------------------------
Main
-------------------------------------------*/

#main {
    margin: 0;
}
#hptop {
    position: relative;
    z-index: -1;
    background-size: cover;
    background-position: 0 35%;
    height: 440px;
    width: 100%;
    margin-top: 5px;
    filter: blur(6px);
    background-image: url(../img/hotop.jpg);
}
#hptitle {
    position: relative;
    height: 500px;
    width: 100%;
}
#hptitle .icon {
    max-width: 15em;
    max-height: 15em;
    margin-top: -7em;
    background-size: cover; 
    margin-left: auto;
    margin-right: auto;
    background: #141414;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
#hptitle .title{
    position: relative;
    text-align: center;
    font-family: "LinuxLibertine", serif;
    font-size: xx-large;
    color: aliceblue;
}
#hptitle .motto {
    position: relative;
    text-align: center;
    font-family: "LinuxLibertine", serif;
    font-size: large;
    color: aliceblue;
}
/*paintwork*/
#hp-paintgallery {
    background-color: rgba(237, 237, 237, 0.937);
    height: 600px;
    width: 100%;
    text-align: center;
    padding-top: 30px;
}
#hp-paintgallery .hpmgwelcome {
    padding-top: 30px;
    font-size: xx-large;
    color: #141414;
    filter: blur(0.5px);
    font-family: "LinuxLibertine", serif;
}
#hp-paintgallery #hpmg {
    margin-top: 25px;
    justify-content: center;
    align-items: center;
    display: flex;
    height: auto;
}
#hpmg .hpmg {
    background-color: antiquewhite;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    width: 215px;
    height: 323.6px;
    margin: 38px;
    justify-content: center;
    align-items: center
}
#hpmg .hpmg:hover {
    scale: 1.01;
    filter: brightness(1.02);
} 
/*fiction*/
#hp-fictionlist {
    height: 600px;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    color: aliceblue;
}
#hp-fictionlist .hpficwelcome {
    padding-top: 30px;
    font-size: xx-large;
    font-family: "LinuxLibertine", serif;
    filter: blur(0.5px);
}
#hp-fictionlist .container {
    margin-top: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    height: 413px;
    margin-bottom: 0;
    overflow: hidden;
}
.hpficlorem {
    margin-top: 0;
    opacity: 0;
}
.hpficlorem:hover {
/* Animation*/                                              /*後でスクロールのやつにする！*/
    /*デフォ値だったらその項目を省略してもいいんだよ*/
    animation-name: hpficlorem; /* @keyframesの識別名*/
    animation-duration: 0.6s; /* アニメーションが一回動作するのに必要な時間(s), デフォの0s だと動かない*/
    animation-timing-function: ease; /* アニメーションの変化具合, easeがデフォでなめらか, ease-in は開始時だけなめらか, linearは一定*/
    animation-delay: 0.2s; /* 開始遅延(s), デフォは0s*/
    animation-iteration-count: 1; /* 何回アニメーションを動作させるか。デフォは1で永遠に動かしたい場合はinfinite*/
    animation-direction: normal; /* アニメーションの動作方向, デフォはnormalでreverseにすると逆に動く*/
    animation-fill-mode: forwards; /* 終了時の状態、デフォはnoneで指定なし。fowardsは終了時の状態、backwardsは開始時、bothは両方。*/

    /*animation: [name] [duration] [timing-function] [delay] [interation-count] [direction] [fill-mode]で一括指定することもできるよ。;*/
}
@keyframes hpficlorem { /*出現魔法*/
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/*Else*/
#hpelse {
    background-color: rgba(237, 237, 237, 0.937);
    width: 100%;
}
#hpelse .hpecontainer {
    margin: 0 10px 0px 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 10px;
}
#hpelse .hpelse {
    background-color: antiquewhite;
    background-size: cover; /*画像の縦横比はそのままで、できるだけ大きくなるよう拡大縮小する*/
    background-position: center; /*中央に配置*/
    height: 520px;
    position: relative;
}

/*-------------------------------------------
Main レスポンシブ
-------------------------------------------*/
@media screen and (max-width: 767px) {
    #hptop {
    height: 340px;
    }
    #hp-paintgallery #hpmg {
        padding: 25px;
        margin-top: 0;
    }
    #hpmg .hpmg {
        position: relative;
        height: 370px;
        width: 300px;
    }
    #hpmg .hpmg:nth-child(1) {
    display: none;
    }
    #hpmg .hpmg:nth-child(2) {
        border: rgb(229, 214, 194);
        z-index: 1;
        float: inherit;
        margin: 0;
    }
    #hpmg .hpmg:nth-child(3) {
        display: none;
    }
    #hp-fictionlist .container {
        justify-content: center;
        align-items: center;
        display: flex;
        width: 75%;
        height: 397px;
        margin: auto;
        padding-top: 20px;
        overflow: hidden; /*はみ出したときに行う処理, hiddenは隠す*/
        text-overflow: ellipsis; /*文字はみ出した部分省略*/
        box-sizing:border-box; /*はみ出し防止*/
    }
    .divb5 {
        padding-top: 40px;
    }
    #hpelse .hpecontainer {
        grid-template-columns: 1fr;
    }
}

/*-------------------------------------------
Footer
-------------------------------------------*/
#footer {
    width: 100%;
    background-color: #1d1d1f;
    color: aliceblue;
    font-size: 12px;
    padding: 20px 0;
}

#footer .text-area {
    border-bottom: 1px solid #d2d2d7;
}

#footer .text-area p {
    margin-bottom: 20px;
}

#footer .footer-menu {
    display: flex;
    border-bottom: 1px solid #d2d2d7;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

#footer .footer-menu .menu {
    width: 25%;
}

#footer .footer-menu .title {
    color: azure;
    font-weight: bold;
    margin-top: 20px;
}

#footer .footer-menu li {
    margin-top: 10px;
}

#footer .footer-menu a {
    color: aliceblue;
}

#footer .footer-menu a:hover {
    text-decoration: underline;
}

#footer .copyright {
    font-size: 12px;
}

/*-------------------------------------------
レスポンシブ
-------------------------------------------*/
@media screen and (max-width: 767px) {
    #footer .footer-menu {
        flex-wrap: wrap;
    }
    #footer .footer-menu .menu {
        width: 50%;
    }
}