﻿@charset "UTF-8";

/*    reset
-------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
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, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    FONT-WEIGHT: normal;
    LETTER-SPACING: normal;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal;
    line-height: 1;
    min-height: 100vh;
    line-height: 150%;
    word-break: normal;
}

body,
button,
input,
select {
    font-family: 'メイリオ',Meiryo,'游ゴシック',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}

ol, ul {
    list-style: none;
}

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

/*    global
-------------------------------------------------------------*/

body {
    background-image: url(/common/images/anchorverback.png);
    background-position: 10% 80%;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: scroll;
    overflow-x: hidden;
}

.hpcontents {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    font-weight: bold;
    font-size: 1.1em;
}

/*    default
-------------------------------------------------------------*/

.maincontents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px auto 0;
    width: 600px;
    font-weight: bold;
    font-size: 1.1em;
}

.logoarea {
    text-align: end;
}

.minatologo {
    width: 120px;
}

.profiletable {
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    padding: 20px;
    margin: 0 auto;
}

    .profiletable th {
        width: 100px;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }


    .profiletable td {
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }

/*    header
-------------------------------------------------------------*/
.minatoheader {
    width: 100%;
}

.minatoheaderitems {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    vertical-align: middle;
    margin: 10px 10px;
}

    .minatoheaderitems div {
        margin: 5px 20px 5px 10px;
        word-break: keep-all;
        white-space: nowrap;
    }

.minatotitleplate img {
    height: 37px;
}


/*    Link List
-------------------------------------------------------------*/
.linklistcontainer {
    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    /*margin-left: 10px;*/
    justify-content: center;
    /*width: 100%;*/
}

.linklistitems {
    display: flex;
    flex-direction: row;
    border: 2px solid skyblue;
    border-radius: 10px;
    box-shadow: 2px 2px 0px 0 skyblue;
    margin: 10px;
}

.linklistitem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.cateoryitem {
    border: solid steelblue 2px;
    border-radius: 10px;
    background-color: cornflowerblue;
    box-shadow: 2px 2px 0px 0 steelblue;
    margin: 10px;
    padding: 5px 10px;
    word-break: keep-all;
    white-space: nowrap;
    color: white;
    font-weight: bold;
}

.linkitemone {
    /*border-bottom: solid blue 2px;*/
    /*border-radius: 10px;*/
    margin: 10px;
    padding: 5px;
    word-break: keep-all;
    white-space: nowrap;
}

    .linkitemone a:hover {
        color: purple;
        font-weight: bold;
    }


    .pinimage {
        height: 16px;
        width: 16px;
    }

.linkurl {
    cursor: pointer;
}


/*    maintenance
-------------------------------------------------------------*/

.maintenancecontainer {
    display: flex;
    flex-direction: column;
    /*margin-left: 10px;*/
    justify-content: center;
    /*width: 100%;*/
}

    .maintenancecontainer hr {
        width: 100%;
    }

    .maintenanceitems {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 5px;
    }

.maintenanceitems div {
    margin: 5px 20px 5px 10px;
    word-break: keep-all;
    white-space: nowrap;
}

    .maintenancetitle {
    width: 300px;
}

.maintenanceurl {
    width: 500px;
}

.maintenancecategory {
    width: 200px;
}

.maintenanceitems.buttons {
    justify-content: space-between;
}

.maintenanceitems.buttons input {
    width: 100px;
    margin: 0 20px;
}

/*    footer
-------------------------------------------------------------*/
    .minatofooter {
        width: 100%;
    }

    .minatofooter ul {
        display: flex;
        justify-content: space-between;
        vertical-align: middle;
        margin: 10px 20px;
        align-items: flex-end;
    }

.minatologo {
    width: 60px;
}

.copylight {
    font-size: xx-small;
}

.btPageTop {
    position: fixed;
    bottom: 40px;
    right: 40px;
    font-size: 77%;
    z-index: 100;
}

    .btPageTop a {
        display: block;
        overflow: hidden;
        width: 80px;
        height: 80px;
        background: url(/common/images/bt_pagetop.png) no-repeat 0 0;
    }

        .btPageTop a span {
            display: none;
        }

        .btPageTop a:active,
        .btPageTop a:hover {
            background: url(/common/images/bt_pagetop_on.png) no-repeat 0 0;
        }


/*    mobile
-------------------------------------------------------------*/

@media (max-width: 640px) {

    body {
        font-size: 3.73vw;
        background-image: url(/common/images/anchorverback2.png);
    }

    .maincontents {
        font-size: 0.8em;
        max-width: 600px;
        width: 90%;
    }

    .minatologo {
        width: 60px;
    }

    .profiletable th {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.5ch;
    }

    .profiletable th, td {
        width: 100%;
        display: block;
    }

    .googlesaerch {
        display: none;
    }

    .maintenancecontainer{
        display: none;
    }

    .linklistitems {
        display: flex;
        flex-direction: column;
        border: 2px solid skyblue;
        border-radius: 10px;
        box-shadow: 2px 2px 0px 0 skyblue;
        margin: 10px;
    }
}