@charset "UTF-8";

body {
    color: #333333;
    font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.8em;
    margin: 0px 0px;
}

h1 {
    font-size:1.8em;
    text-align:center;
}
h2 {
    font-size:1.4em;
    border-left: 6px solid #ff6347;
    margin-top:2em;
    padding-left: 0.5em;
}

h3 {
    font-size:1.2em;
    border-bottom: 3px dotted #333;
    margin-top: 0.5em;
}

ul {
    padding-left: 2em;
}

.small60 {
    font-size:60%;
}
.small75 {
    font-size:75%;
}
.small80 {
    font-size:80%;
}


/* header、fotter */

header, footer {
    background: linear-gradient(90deg, #fff, #f5f5f5);
    padding: 1em 2em;
}
@media screen and (max-width: 480px) {
    header, footer {
        padding: 0.8em 1em;
    }
}

/* header */

#header_flex {
    display:flex;
    align-items: center;
}

.header_inline-block {
    display:inline-block;
}

header h1.logo {
    display: inline-block;
    font-size: 1.1em;
    margin: 0;
    vertical-align: middle;
    margin-left:15px;
}

/* header logo */
header h1.logo a {
    text-decoration: none;
    color: #333;
}

header img.logo {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
}

@media screen and (max-width: 480px) {
    header img.logo {
        width: 40px;
    }
}

.header_nav {
    margin-left: auto;
}

header nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    margin:0;
    padding: 6px;
    list-style: none;
}

header nav ul li {
    list-style: none;
    margin-left: 1em;
}

header nav ul li a {
    text-decoration: none;
    color:#333;
}

@media screen and (max-width: 480px) {
    header nav {
        font-size:0.9em;
    }
}



main {
    background: linear-gradient(-135deg, #fff, #fffce2);
    padding: 2em 4em;
}
@media screen and (max-width: 480px) {
    main {
        padding:1em 1em;
    }
}

main article {
    margin-top: 60px;
}

#firstview {
    margin-top: 20px
}

#first-view h1 {
    line-height: 1.1em;
}

#first-view img {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
}

.service-link {
    margin: 1em 0px;
}
.service-link a {
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background-color: #2f4f4f;
    padding: 10px 20px;
}

.service-link a:hover {
    opacity: 0.8;
}

section {
    padding:10px 20px;
}

#copyright {
    font-size:0.8em;
    text-align:center;
}

footer {
    padding: 10px 20px 10px 20px;
}