/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(10px)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

body {
    font-family: "YuGothic","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    font-size:16px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    font-feature-settings: "palt" 1;
    color: #3E3E3E;
    background: url(/img/backgroundimg.png) center right no-repeat;
    background-color: #64BAE9;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}
article {
    width:512px;
    padding: 48px 56px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 16px 16px 0px 0 rgba(39, 152, 213, 0.5);
    position: absolute;
    top: 50%;
    left: 66%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
h1 {
    padding: 16px 0 16px 16px;
    line-height: 100%;
}
h1 svg {
    width: 200px;
    height: 30px;
}
h2 {
    text-align: center;
}
h2 {
    font-size: 24px;
    margin-bottom: 24px;
}
.contents p {
   margin-bottom: 16px; 
}
.contents p > a {
   color: #64BAE9;
}
.contents p:last-child {
    margin-bottom: 32px; 
}
p.link {
    text-align: center;
}
p.link a {
    color: #64BAE9;
    text-decoration: none;
    text-align: center;
    margin: 0 auto 24px;
}
a.serviceLink {
    width: 299px;
    display: block;
    padding: 10px 0;
    letter-spacing: 2px;
    font-weight: bold;
    background: #FFFFFF;
    border: 2px solid #64BAE9;
    box-sizing: border-box;
    border-radius: 4px;
}
a.serviceLink:hover {
    color: #FFFFFF;
    background: #64BAE9;
}
a.serviceLink,
a.serviceLink::before,
a.serviceLink::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .4s;
    transition: all .4s;
}
@media screen and (max-width: 880px) {
    body {
        background: url(/img/backgroundimg_sp.png) center no-repeat;
        background-color: #64BAE9;
        padding-bottom: 2400px;
        background-size:cover;
        -moz-background-size:cover;
        -webkit-background-size:cover;
        -o-background-size:cover;
        -ms-background-size:cover;
    }
    article {
        width:80%;
        min-width: 272px;
        margin: 0 auto;
        box-shadow: 8px 8px 0px 0 rgba(39, 152, 213, 0.5);
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        -webkit- transform: none;
    }
}
@media screen and (max-width: 610px) {
    body {
        font-size: 12px;
        background: url(/img/backgroundimg_sp.png) top center no-repeat;
        background-color: #64BAE9;
        padding-bottom: 800px;
        background-size:cover;
        -moz-background-size:cover;
        -webkit-background-size:cover;
        -o-background-size:cover;
        -ms-background-size:cover;
    }
    article {
        width:90%;
        min-width: 272px;
        margin: 0 auto;
        padding: 32px 24px 24px 24px;
        box-shadow: 8px 8px 0px 0 rgba(39, 152, 213, 0.5);
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        -webkit- transform: none;
    }
    h1 {
        padding: 16px;
    }
    h1 svg {
        width: 100px;
        height: 15px;
    }
    h2 {
    font-size: 16px;
    }
    .contents p {
        margin-bottom: 16px; 
    }
    .contents p:last-child {
        margin-bottom: 24px; 
    }
    a.serviceLink {
        width: 80%;
        padding: 10px;
    }
}