@charset "UTF-8";
    /***FONT***/

    @import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap');

    body,
    select {
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", "Yu Gothic", sans-serif;
    }

    h1,
    #subtitle,
    #main-menu,
    #footer-menu {
        font-family: 'Sorts Mill Goudy';
    }

    /***COMMON***/

    * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-weight: 400;
    }

    body {
        margin-left: 20px;
        margin-right: 20px;
        line-height: 2.0em;
    }

    body,
    select {
        color: #333333;
    }

    p {
        margin: 20px 0;
    }

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

    h2 {
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 1.4em;
        line-height: 1.8em;
        border-bottom: 1px solid #cccccc;
    }

    h3 {
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 1.2em;
        line-height: 1.8em;
        border-bottom: 1px solid #cccccc;
    }

    h4 {
        margin-top: 30px;
        margin-bottom: 10px;
        font-size: 1.1em;
        line-height: 1.5em;
        /*border-bottom: 1px solid #cccccc;*/
        border-left:5px solid #dddddd;
        padding-left:7px;
    }

    hr {
        border-bottom: 1px solid #cccccc;
    }

    strong {
        font-weight: bold;
    }

    ul,
    ol,
    dd {
        padding-left: 25px;
    }

    dt {
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    rt {
        font-size: 0.5em;
    }

    select {
        border: 1px solid #cccccc;
    }

    video {
        max-width: 100%;
    }

    figure {
        text-align: center;
    }

    figcaption {
        font-size: 0.8em;
        line-height: 1.0em;
    }

    /***COMMON CUSTOM***/

    .center {
        text-align: center;
    }

    .small-text {
        font-size: 0.8em;
    }

    .gray-text {
        color: #999999;
    }

    .gray-text:hover,
    .gray-text:active {
        color: #dddddd;
        x text-decoration: underline;
    }

    .no-border {
        border: 0;
    }

    .box {
        background-color: #eeeef6;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        margin-top: 20px;
        overflow-wrap: break-word;
    }

    /***LINK***/

    a,
    a:link,
    a:visited {
        color: #999999;
        text-decoration: none;
    }

    a:hover,
    a:active {
        color: #dddddd;
        text-decoration: underline;
    }

    /***HEADER***/

    header {
        text-align: center;
        /*margin-bottom: 40px;*/
        margin-bottom: 20px;
        margin-top: 40px;
    }

    header a,
    header a:link,
    header a:visited {
        color: #333333;
        text-decoration: none;
    }

    header a:hover,
    header a:active {
        color: #dddddd;
        text-decoration: none;
    }

    h1 {
        font-size: 2.5em;
        /*letter-spacing: 5px;*/
    }

    header hr {
        border-top: solid 1px #333333;
        width: 40%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 8px;
        margin-bottom: 3px;
    }

    #subtitle {
        font-size: 1.0em;
    }

    /***GRID***/

    .grid {
        display: grid;
        row-gap: 20px;
        column-gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    /* グリッド内要素数が少ないときに重複適用 */

    .grid-fill {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .grid-item a:hover img {
        opacity: 60%;
    }

    .grayout {
        filter: grayscale(100%);
        opacity: 10%;
    }

    /***MAIN MENU***/

    #main-menu {
        list-style-type: none;
        /* li,ol左余白設定の打ち消し */
        padding-left: 0;
        margin-top: 15px;
        display: flex;
        justify-content: center;
        position: relative;
        font-size: 1.2em;
    }

    #main-menu li {
        margin: 0 15px;
    }

    #main-menu-lang {
        position: absolute;
        right: 0;
        font-size: 0.8em;
    }

    #top-menu-map {
        text-align: center;
        /*margin-top:0;*/
    }

    /***Matterport iframeの縦横比保存***/

    .iframe-responsive {
        padding-top: 56.27%;
        position: relative;
        width: 100%;
    }
    .iframe-responsive iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /***YouTube動画***/

    .iframe-youtube {
        text-align: center;
    }
    .iframe-youtube iframe {
        display: block;
        margin: 30px auto 0;
        max-width: 100%;
    }


    /* backup
    .iframe-youtube iframe {
        display: block;
        margin: 30px auto 0;
        max-width: 100%;
    }

    .iframe-youtube {
        text-align: center;
    }
    */

    /***MAIL***/

    .mail::after {
        content: attr(data-domain);
    }

    .mail::before {
        content: attr(data-user) "@";
    }

    /***FOOTER***/

    #footer-sns-link {
        text-align: center;
        margin-top: 30px;
    }

    #footer-menu {
        list-style-type: none;
        padding-left: 0;
        border-top: 1px solid #cccccc;
        display: flex;
        justify-content: space-between;
    }

    #footer-menu li {
        font-size: 0.7em;
    }

    /***TOP-ARROW***/

    #page_top {
        width: 50px;
        height: 50px;
        position: fixed;
        right: 20px;
        bottom: 35px;
        background: #cccccc;
        opacity: 0.5;
        border-radius: 50%;
        z-index: 10;
    }

    #page_top a {
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
        text-decoration: none;
    }

    #page_top a::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f106';
        font-size: 30px;
        color: #fff;
        position: absolute;
        width: 30px;
        height: 30px;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
    }

    #map {
        height: 600px;
        width: 100%;
    }

    .info-window {
        text-align: center;
    }

    /***MEDIA SCREEN***/
    /*ディスプレイ幅1040以降で1000に固定*/

    @media screen and (min-width:1040px) {
        body {
            width: 1000px;
            margin-right: auto;
            margin-left: auto;
        }
    }

    /*スマホ用*/

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

        #map {
            height: 350px;
        }

        .info-window {
            padding-bottom: 5px;
        }

        .info-window img {
            padding-right: 13px;
        }


        h1 {
            font-size: 2.0em;
            /*letter-spacing: 3px;*/
        }

        header hr {
            width: 90%;
            margin-top: 0px;
            margin-bottom: 0px;
        }

        #subtitle {
            font-size: 0.9em;
        }

        #main-menu {
            font-size: 1.0em;
        }

        #main-menu li {
            margin: 0 10px;
        }

        /*日本語/Englishを日本語/ENに書き換え、スマホ表示用にフォント縮小*/

        #lang-jp,
        #lang-en {
            font-size: 0;
        }

        #lang-jp:before,
        #lang-en:before {
            font-size: 12px;
        }

        #lang-jp:before {
            content: "日本語";
        }

        #lang-en:before {
            content: "EN";
        }

        h2 {
            font-size: 1.2em;
        }

        h3 {
            font-size: 1.1em;
        }

        dd {
            line-height: 2.0em;
            /*スマホ版、bodyのline-heightが効いてない？*/

        }
    }