@charset "UTF-8";
            @import url('https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+JP&display=swap');

            @font-face{font-family:はれのそら明朝; src:url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2') format("woff2");}
            /*-------------------------------------------------
            このフォントはIPAフォントライセンスv1.0の下で提供されています。
            http://ipafont.ipa.go.jp/ipa_font_license_v1.html
            オリジナルのフォントは以下から取得できます。
            https://fontopo.com/?p=377
            http://ipafont.ipa.go.jp/
            -------------------------------------------------*/

            /* all */
            *{
                margin:0; padding:0; border:0; outline:0; text-decoration:none; list-style:none; box-sizing:border-box; font-weight:normal; overflow-wrap:break-word; word-wrap:break-word; -webkit-appearance:none;
            }

            *::before, *::after{
                position:absolute; content:'';
            }

            ::selection{
                color:rgba(248,181,0,0.8); background:rgba(230,180,34,0.1);
            }

            /* text, font */
                /* hedline, paragraph */
                    /* headline */
                    h1{
                        margin:auto; -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; -webkit-text-orientation:upright; writing-mode:vertical-rl; text-orientation:upright;
                    }
                    /* paragraph */
                    p{
                        margin:1em 0;
                    }
                /* font */
                *{
                    font:11px/2.25 'Lora', 'Noto Serif JP', serif; letter-spacing:0.2em;
                }
                h1, h2,h3{
                    font-family: 'はれのそら明朝', serif; letter-spacing:0.5em;}
                    /* size */
                    h1{font-size:1.75em;}
                    h2{font-size:1.00em;}
                            h3{font-size:1.45em;}
                    aside p{font-size:0.95em;}
                    /* color */
                    *{color:rgba(51,54,49,0.8);}
                    aside p, footer p{color:rgba(51,54,49,0.65);}
                    /* etc */
                    span{display:inline-block; border-bottom:solid 1px rgba(51,54,49,0.65);}
                    mark{background:linear-gradient(transparent 60%, rgba(215,207,58,0.5) 0%);}
                    strong{font-weight:600; color:rgba(214,106,53,0.8);}
                    small{font-size:0.85em;}

            /* link */
            a:hover{color:rgba(230,180,34,1); transition:0.3s; cursor:pointer;}

            /* body */
            body{position:relative; text-align:center; width:100%;}
            body::before{position:fixed; z-index:-1000; top:0; left:0; width:100%; height:100vh; background:url('bg.png') center/cover;}

                /* sectioning and groping etc. */
                article{margin:5em auto; padding:0 2.5em; text-align:center; width:85%;  background:rgba(255,255,255,0.8); border:solid 1px rgba(51,54,49,0.65); box-shadow:0 0 0 10px rgba(255,255,255,0.8);}
                section{margin:5em auto;}
                section > section{text-align:justify;}
                    /* text-align */
                    .center{margin:auto; text-align:center;}
                    .right{margin-left:auto; text-align:right;}
                    /* half */
                    .half:first-of-type{border-bottom:solid 1px rgba(51,54,49,0.65);}
                    /* aside */
                    section > aside{position:relative; margin:7.5em auto 5em; padding:0 1.5em; text-align:center;}
                    section > aside::before{top:-3.5em; left:50%; transform:translateX(-50%); width:7.5em; border-top:solid 1px rgba(51,54,49,0.65);}

                    /* title list */
                    ul{margin:auto; width:80%;}
                    li{margin:1.5em auto; padding-bottom:1em; border-bottom:solid 1px rgba(51,54,49,0.65);}
                    li:last-of-type{border:none;}
                    li > aside{width:;}

                    /* form */
                    form{margin:1em auto; width:100%;}
                    input, textarea{padding:0.5em;}
                    input{background:transparent;}
                    input[type=text]{width:100px; border-bottom:solid 1px rgba(51,54,49,0.65);}
                    textarea{margin:1.5em auto; width:100%; max-width:320px; height:10em; background:rgba(255,255,255,0.75)}

                /* footer */
                footer{margin-bottom:5em; padding:0 2em; display:inline-block; background:rgba(255,255,255,0.8);}
                article > footer{background:none;}


            /* media queries */
            /* tablet, PC */
            @media screen and (min-width:700px){

                /* size */
                *{font-size:12px;}

                /* sectioning, contents group etc. */
                article{max-width:540px;}

            }

            @media screen and (orientation:landscape) and (min-width:1000px){

                /* size */
                *{font-size:12px;}

                /* sectioning, contents group etc. */
                article{padding:0; max-width:1000px;}
                section{padding:0 2.5em;}
                    /* half */
                    .half{display:inline-block; vertical-align:top; width:50%;}
                    .half:first-of-type{border:none;}
                    .half:last-of-type{border-left:solid 1px rgba(51,54,49,0.65);}

            }