@charset "utf-8";

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, main, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;}

::-webkit-input-placeholder {
    font-size: 100%;
    font: inherit;
    color: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;}

input, textarea, select,
::-webkit-input-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
::placeholder {
    font-size: 100%;
    font: inherit;
    color: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;}

html, body, footer, header, main,
div, iframe, table, form, img,
menu, nav, article, section, dl, ol, ul {
    vertical-align: top;}

article, aside, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after, q::before, q::after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
button {color: inherit; background-color: transparent;}


/* common */

html {
    font-size: 62.5%;
}

@font-face {
    font-display: swap;
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/NotoSerifJP-500-subset.woff2') format('woff2'),
         url('/assets/NotoSerifJP-500-subset.ttf') format('truetype');
}


:root {
    --font-color: #3B3B3B;
    --border-color: #9C9C9C;
    --bg-gray: #F5F5F5;
    --gold: #9C8200;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background-color: #FAFAFA;
    color: var(--font-color);
    font-size: 1.4rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media screen and (min-width:500px) {

    body {
        font-size: 1.6rem;
    }

}

img {
    width: auto;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.note {
    font-size: .8em;
    line-height: 1.5;
}

.error {
    line-height: 1.5;
}

.error-title {
    margin-bottom: 20px;
    font-size: 2em;
    line-height: 2;
}

/* footer */

footer {
    padding-top: 60px;
}

.copyright {
    color: var(--border-color);
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;

}

/* frontpage */

.front-mv .name-wrap {
    padding: 6% 15% 110%;
    background: #e9e9e6 url(/assets/back-sp.jpg?02) center/auto 100% no-repeat;
    position: relative;
}

    @supports (background-image: url("image.webp")) {
        .front-mv .name-wrap {
            background-image: url(/assets/back-sp.webp?02);
        }
    }

    .front-mv .name-wrap .name {
        margin: 0 auto;
        width: 100%;
    }

    .front-mv .name-wrap .message {
        position: absolute;
        top: 6%;
        left: 46%;
        font-size: 3.1vw;
        letter-spacing: .1em;
        line-height: 1.5;
    }

.front-mv .content {
    padding: 30px 15px 60px;
    text-align: center;
}

    .front-mv hr {
        display: none;
        margin: 0 auto 20px;
        width: 100px;
        height: 1px;
        border: none;
        background-color: var(--border-color);
    }

    .front-mv .title {
        font-size: 1.8rem;
    }

   .front-mv .icon-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-top: 30px;
    }

        .front-mv .icon-list-item {
            padding: 0 20px;
        }

        .front-mv .icon-list-item + .icon-list-item {
            border-left: 1px solid var(--border-color);
        }
        
        .front-mv .icon-list-item a {
            display: block;
            -webkit-transition: opacity .4s;
            -o-transition: opacity .4s;
            transition: opacity .4s;
        }

        .front-mv .icon-list-item img {
            width: 2.1rem;
        }

    @media(hover: hover) {
        .front-mv .icon-list-item a:hover {
            opacity: .5;
        }
    }

@media screen and (max-width:320px) {

    .front-mv .name-wrap .message {
        font-size: 10px
    }

}

@media screen and (min-width:500px) {

    .front-mv .name-wrap {
        padding: 30px 75px 550px;
    }

        .front-mv .name-wrap .name {
            width: 350px;
        }

        .front-mv .name-wrap .message {
            font-size: 16px
        }

}

@media screen and (min-width:750px) {

    .front-mv {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 1.6rem;
        background: #F1F2F4 url(/assets/back-pc.jpg?02) center/cover no-repeat;
    }

    @supports (background-image: url("image.webp")) {
        .front-mv {
            background-image: url(/assets/back-pc.webp?02);
        }
    }

    .front-mv .inner {
        width: 55%;
        padding: 10% 0 10% 20px;
    }

    .front-mv .name-wrap {
        padding: 0;
        background: none;
    }

        @supports (background-image: url("image.webp")) {
            .front-mv .name-wrap {
                background: none;
            }
        }

        .front-mv .name-wrap .name {
            width: 90%;
            max-width: 700px;
        }

        .front-mv .name-wrap .message {
            font-size: 2.3vw;
        }

    .front-mv .content {
        padding: 20px 0 0;
    }

        .front-mv hr {
            display: block;
        }

}

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

    .front-mv .content {
        padding-top: 30px;
    }

        .front-mv hr {
            margin-bottom: 30px;
        }

        .front-mv .title {
            font-size: 2.3rem;
        }

        .front-mv .icon-list {
            margin-top: 40px;
        }

            .front-mv .icon-list-item {
                padding: 0 25px;
            }

            .front-mv .icon-list-item img {
                width: 2.7rem;
            }

}

@media screen and (min-width:1450px) {

    .front-mv .name-wrap .message {
        font-size: 34px;
    }

}

.front-sectioin-headline {
    margin-bottom: 10px;
}

    .front-sectioin-headline img {
        width: auto;
        height: 5.6rem;
    }

@media screen and (min-width:500px) {

    .front-sectioin-headline {
        margin-bottom: 15px;
    }

    .front-sectioin-headline img {
        height: 6.4rem;
    }

}

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

    .front-sectioin-headline {
        margin-bottom: 20px;
    }
}

.front-profile {
    padding-bottom: 60px;
}

    .front-profile .img {
        margin: 0 20px 30px 0;
        overflow: hidden;
        border-top-right-radius: 60px;
        background-color: #EBEFF0;
    }

    .front-profile .img img {
        display: block;
        margin-left: auto;
        width: 100%;
        max-width: 800px;
    }

    .front-profile .txt {
        margin: 0 auto;
        padding: 0 20px;
        max-width: 560px;
        position: relative;
    }

        .front-profile .profile-name {
            padding-bottom: 1.8rem;
            font-size: 2.6rem;
            ruby-position: under;
        }

            .front-profile .profile-name rt {
                color: var(--gold);
                font-size: 1.3rem;
                vertical-align: -1.8rem;
                text-align: left;
            }

        .front-profile .profile-data {
            margin-top: 25px;
            line-height: 1.4;
            text-align: left;
        }

            .front-profile .profile-data th {
                padding-right: 25px;
                color: var(--gold);
            }

            .front-profile .profile-data tr + tr th {
                padding-top: 12px;
            }

            .front-profile .profile-data tr + tr td {
                padding-top: 12px;
            }

@media screen and (min-width:500px) {

    .front-profile .img {
        border-top-right-radius: 100px;
    }

    .front-profile .txt {
        padding: 0 30px;
    }

        .front-profile .profile-name {
            padding-bottom: 2.1rem;
            font-size: 3rem;
        }

            .front-profile .profile-name rt {
                font-size: 1.5rem;
                vertical-align: -2.1rem;
            }

        .front-profile .profile-data {
            margin-top: 30px;
        }

            .front-profile .profile-data th {
                padding-right: 30px;
            }

}

@media screen and (min-width:750px) {

    .front-profile {
        padding-top: 60px;
    }

    .front-profile .inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }

    .front-profile .img {
        margin: 0;
        width: 55%;
    }

    .front-profile .txt {
        margin: 0;
        padding: 0 40px;
        width: 45%;
        min-width: -webkit-fit-content;
        min-width: -moz-fit-content;
        min-width: fit-content;
        max-width: 470px;
        -ms-flex-item-align: stretch;
            align-self: stretch;
    }

}

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

    .front-profile .txt {
        padding: 35px 80px 35px 50px;
    }

        .front-profile .txt::before,
        .front-profile .txt::after {
            content: '';
            display: block;
            width: 1px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 30px;
            z-index: 1;
            background-color: var(--font-color);
        }

        .front-profile .txt::after {
            width: 3px;
            height: 60px;
            right: 29px;
            z-index: 2;
            background-color: var(--gold);
        }

        .front-profile .profile-name {
            padding-bottom: 3rem;
        }

            .front-profile .profile-name rt {
                vertical-align: -3rem;
            }

        .front-profile .profile-data {
            margin-top: 35px;
        }

}

.front-diary {
    padding: 50px 20px 20px;
    background-color: var(--bg-gray);
}

    .front-diary .inner {
        margin: 0 auto;
        max-width: 500px;
        position: relative;
    }

    .front-diary-item {
        margin-top: 20px;
        border-top-right-radius: 50px;
        background-color: #FFF;
        position: relative;
    }

    .front-diary-item a {
        display: block;
        padding: 25px 20px 40px;
    }

        .front-diary-item:first-child {
            margin-top: 0;
        }

        .front-diary-item::before,
        .front-diary-item::after {
            content: '';
            display: block;
            width: 60px;
            height: 1px;
            position: absolute;
            right: 18px;
            bottom: 20px;
            z-index: 1;
            background-color: var(--font-color);
        }

        .front-diary-item::after {
            width: 20px;
            height: 3px;
            bottom: 19px;
            z-index: 2;
            background-color: var(--gold);
            -webkit-transition: width .2s;
            -o-transition: width .2s;
            transition: width .2s;
        }

    @media(hover: hover) {
        .front-diary-item:hover::after {
            width: 40px;
            -webkit-transition: width .5s;
            -o-transition: width .5s;
            transition: width .5s;
        }
    }

        .front-diary-item .date {
            display: block;
            color: var(--gold);
            font-size: 1.3rem;
        }

        .front-diary-item .title {
            margin-top: 15px;
            font-size: 1.8rem;
            line-height: 1.3;
        }

        .front-diary-item .excerpt {
            margin-top: 10px;
            line-height: 1.8;
        }

    .front-diary .copyright  {
        margin-top: 60px;
    }

@media screen and (min-width:500px) {

    .front-diary {
        padding: 60px 30px 20px;
    }

    .front-diary-item {
        margin-top: 25px;
    }

        .front-diary-item .date {
            font-size: 1.5rem;
        }

        .front-diary-item .title {
            font-size: 2.2rem;
        }

}

@media screen and (min-width:750px) {

        .front-diary .inner {
            max-width: 1000px;
        }

        .front-diary-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        }

        .front-diary-item {
            margin: 30px 0 0 30px;
            width: calc(50% - 15px);
        }

            .front-diary-item:nth-child(-n+2) {
                margin-top: 0;
            }

            .front-diary-item:nth-child(2n+1) {
                margin-left: 0;
            }

    .front-diary .copyright  {
        margin-top: 80px;
    }

}

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

    .front-diary .inner {
        padding: 0 50px;
    }

    .front-diary .inner::before,
    .front-diary .inner::after {
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: var(--font-color);
    }

    .front-diary .inner::after {
        width: 3px;
        height: 60px;
        left: -1px;
        z-index: 2;
        background-color: var(--gold);
    }

    .front-diary-item,
    .front-diary-item:nth-child(-n+2),
    .front-diary-item:nth-child(2n+1) {
        margin: 30px 0 0 30px;
        width: calc(33.333% - 20px);
    }

        .front-diary-item:nth-child(-n+3) {
            margin-top: 0;
        }

        .front-diary-item:nth-child(3n+1) {
            margin-left: 0;
        }

}

/* subpage */

.subpage {
    padding: 40px 20px 20px;
}

.subpage header {
    margin: 0 auto;
    padding: 0 0 30px;
    max-width: 1000px;
    position: relative;
}

    .subpage header::before,
    .subpage header::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        background-color: var(--font-color);
    }

    .subpage header::after {
        width: 50px;
        height: 3px;
        bottom: -1px;
        z-index: 2;
        background-color: var(--gold);
    }
 
    .subpage header a {
        display: block;
        margin: 0 auto;
        width: 200px;
    }

.subpage main {
    margin: 0 auto;
    padding-top: 50px;
    max-width: 1000px;
}

@media screen and (min-width:500px) {

    .subpage {
        padding-left: 30px;
        padding-right: 30px;
    }
 
    .subpage header a {
        margin-left: 0;
    }


}

/* article */

.subpage .article-header {
    padding-bottom: 30px;
}

    .subpage .article-header .date {
        display: block;
        margin-bottom: 15px;
        color: var(--gold);
    }

    .subpage .article-header .title {
        font-size: 3rem;
        line-height: 1.3;
    }

.subpage .article-body {
    display: block;
}

    .subpage .article-body p {
        margin-bottom: 1.5em;
        line-height: 2;
        text-align: justify;}

    .subpage .article-body p:empty{
        display: none;}

    .subpage .article-body img,
    .subpage .article-body div,
    .subpage .article-body figure {
        margin: 2em 0;}

        .subpage .article-body img:first-child,
        .subpage .article-body div:first-child,
        .subpage .article-body figure:first-child {
            margin-top: 0;}

        .subpage .article-body p:last-child,
        .subpage .article-body img:last-child,
        .subpage .article-body div:last-child,
        .subpage .article-body figure:last-child {
            margin-bottom: 0;}

            .subpage .article-body figure img,
            .subpage .article-body figure div {
                margin: 0;
                width: 100%;}

            .subpage .article-body figure figcaption {
                margin-top: 5px;
                font-size: .8em;
                line-height: 1.4;}

            .subpage .article-body figure.portrait img {
                max-width: 500px;}

        .subpage .article-body strong {
            font-weight: bold;}

        .subpage .article-body em {
            font-style: oblique}

        .subpage .article-body p a {
            color: var(--gold);
            text-decoration: underline;
            -webkit-transition: -webkit-text-decoration .4s;
            transition: -webkit-text-decoration .4s;
            -o-transition: text-decoration .4s;
            transition: text-decoration .4s;
            transition: text-decoration .4s, -webkit-text-decoration .4s;}

        @media(hover: hover) {
            .subpage .article-body p a:hover {
                -webkit-text-decoration-color: transparent;
                        text-decoration-color: transparent;
            }
        }

        .subpage .article-body .has-text-align-left {text-align: left !important;}
        .subpage .article-body .has-text-align-center {text-align: center !important;}
        .subpage .article-body .has-text-align-right {text-align: right !important;}

.button-back {
    margin: 60px auto 0;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-transition: color .4s;
    -o-transition: color .4s;
    transition: color .4s;
}

    @media(hover: hover) {
        .button-back:hover {
            color: var(--gold);
        }
    }

    .button-back::before {
        content: '';
        display: inline-block;
        margin-right: .5em;
        width: .4em;
        height: .4em;
        border-top: 1px solid;
        border-left: 1px solid;
        vertical-align: .1em;
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

@media screen and (min-width:500px) {

    .subpage main article {
        padding: 0 30px;
    }

}

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

    .subpage main article {
        padding: 0 50px;
    }

}