@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/*========= body背景色の変化CSS ===============*/

#maintop {
  animation: bgchange 10s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
}

@keyframes bgchange{
      0%   {background:#302b2a;}/*変化させたい色*/
      20%  {background:#9c6054;}/*変化させたい色*/
      40%  {background:#f28218;}/*変化させたい色*/
      60%  {background:#4ba2fa;}/*変化させたい色*/
      80%  {background:#094d91;}/*変化させたい色*/
      100% {background:#302b2a;}/*変化させたい色*/
 }

/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #444;
}

/*
 * Base structure
 */

html,
body {
    background: linear-gradient(#fff, #000);
    text-align: center;
}

/*
 * Header
 */

#header {
    margin: 0;
    padding: 0 0 50px 0;
    border: solid 2px #ffffff;
}

img {
    border: none;
    vertical-align: top;
}

.logo {
    margin-top: 150px;
}

.masthead-nav > li {
    display: inline;
}

/* Button */

a[href^="tel:"] {
    pointer-events: none;
}

.btn-flat-border {
    display: inline-block;
    padding: 0.3em 1em;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    text-decoration: none;
    color: #00217a;
    border: solid 2px #00217a;
    border-radius: 3px;
    transition: .4s;
}

.btn-flat-border:hover {
    background: #00217a;
    color: #fff;
}

/*
 * Text decoration
 */

h2 {
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

strong {
    font-size: 200%;
    border-bottom: 2px dotted #fff;
}

.rightbox {
    float: right;
}

.right {
    text-align: right;
    border-bottom: 2px dotted #fff;
}

/*
 * posision
 */

hr {
    width: 100%;
    text-align: center;
    border: 1px solid #fff;
}

#main {
    margin: 0;
    padding-top: 5px;
    background: #3d3d3d;
}

#main2 {
    margin: 0;
    padding-top: 5px;
    background: #094d91;
}

#main3 {
    margin: 0;
    padding-top: 5px;
    background: #f28218;
}

.contents {
    margin: 50px 150px 50px 150px;
    padding: 50px;
    text-align: center;
    background: #fff;
}

.lead {
    margin: 50px;
    padding: 50px;
    background: #ccc;
    text-align: left;
    border: 2px solid #A1A9BA;
}

/*
 * Footer
 */

#footer {
    color: #fff;
}


/*
 * max-width:999px
 */

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

    /*
     * Header
     */

    #header {
        width: auto;
    }

    /*
     * posision
     */

    hr {
        width: auto;
    }

    .contents {
        margin: 5px 15px 5px 15px;
        padding: 5px;
    }

    .lead {
        margin: 5px;
        padding: 5px 5px 5px 35px;
    }

}

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

    h1 img {
        max-width: 100%;
    }

    .lead {
        padding: 5px 5px 5px 20px;
    }
}