@charset "utf-8";

html, body {
    font-family: "Sawarabi Gothic", "Yu Gothic UI", "YuGothicUI-Regular", "Meiryo UI", "MS UI Gothic", "游ゴシック体", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック","MS Gothic", sans-serif;
    padding: 0;
    margin: 0;
    color: #595656;
    font-size: 16px;
    font-size: 1.3vmin; /*1.11vmin;*/

    /* for iOS*/
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
}

/* タグの既定値 ここから */
div,p,h1,ul,li {
    padding: 0;
    margin: 0;
}
img {
    vertical-align: top;
}
a img {
    border: none;
}
a:link {
    color:#595656;
    text-decoration: none;
}
a:visited {
    color:#595656;
    text-decoration: none;
}
a:hover {
    color:#595656;
    text-decoration: none;
}
a:active {
    color:#595656;
    text-decoration: none;
}
textarea,
input,
select,
option {
    font-size: 1rem;
}
/* タグの既定値 ここまで */

.visible {
    display: block !important;
}

.unvisible {
    display: none !important;
}

.header {
    position: fixed;
    top: 0;
    left: calc((100% - 1024px)/2);

    width: 1024px;
    height: 4em;
    vertical-align: top;

    background-color: rgba(255, 255, 255, 0.85);

    -webkit-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
}

.header .knob-menu,
.header .title,
.header .icon-sns {
    float: left;
    height: 4em;
}

.header .title {
    width: calc(100%  - 5em - 3em - 3em - 1em);
    vertical-align: middle;
    line-height: 4em;
    letter-spacing: 0.125em;
    color: #373434;
}

.header .title img {
    display: inline-block;
    margin: 1.15em 0 0 1.5em;
    height: 1.5em;
}

.header .icon-sns {
    width: 3em;
}

.header .icon-sns img {
    width: 2em;
    padding: 1em 0 0 0.5em;
}

.knob-menu {
    width: 5em;
    background-color: #373434;
}

.knob-menu img {
    width: 2em;
    margin: 1em 0 0 1.5em;
}

.footer {
    width: 100%;
    margin-top: 5em;
    margin-bottom: 5em;
}

.footer .logo {
    margin: 0 auto 0.5em auto;
    width: 15em;
}

.footer .logo img {
    width: 100%;
}

.footer .copyright {
    margin-top: 1rem;
    font-size: 1.15rem;
    font-weight: bold;
}

.footer .info-text {
    text-align: center;
    line-height: 1.5rem;
}

.flt-menu {
    display: none;
    position: fixed;
    top: 4.25em;
    left: calc((100% - 1024px)/2);
    width: auto;
    height: auto;
    background-color: rgba(255,255,255,0.85);
    outline: none;

    -webkit-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
}

.flt-menu-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    opacity: 0;
}

.flt-menu ul {
    list-style: none;
}

.flt-menu ul li {
    min-width: 18em;
    padding: 0 2em 0 2em;
}

.flt-menu ul li p {
    font-size: 1.5em;
    text-align: center;
    padding: 1em;
    border-bottom: 1px dashed #484848;
}

.flt-menu ul li:last-child p {
    border-bottom: none;
}

.flt-menu ul li:hover {
    animation: animFocusMenuItem 0.25s linear 0s 1;
    -webkit-animation: animFocusMenuItem 0.25s linear 0s 1;
    -moz-animation: animFocusMenuItem 0.25s linear 0s 1;
    -ms-animation: animFocusMenuItem 0.25s linear 0s 1;
    background-color: rgba(220, 221, 221,0.85);
}

.show-menu {
    animation: animShowMenu 0.25s linear 0s 1;
    -webkit-animation: animShowMenu 0.25s linear 0s 1;
    -moz-animation: animShowMenu 0.25s linear 0s 1;
    -ms-animation: animShowMenu 0.25s linear 0s 1;
}

.show-popup {
    animation: animShowMenu 0.25s linear 0s 1;
    -webkit-animation: animShowMenu 0.25s linear 0s 1;
    -moz-animation: animShowMenu 0.25s linear 0s 1;
    -ms-animation: animShowMenu 0.25s linear 0s 1;
}

.con-main {
    position: relative;
    width: 1024px;
    margin: 0 auto 0 auto;
}

/* 暫定花 */
.bgf1 {
    position: absolute;
    width: 13em;
    z-index: -2;
    left: calc(100% - 13em);
    top: 7em;
}

.bgf2 {
    position: absolute;
    width: 13em;
    z-index: -2;
    left: 12em;
    top: 18.5em;
}

.bgf3 {
    position: absolute;
    width: 16em;
    z-index: -2;
    left: calc(100% - 23.5em);
    top: 29.5em;
}

.bgf4 {
    position: absolute;
    width: 16em;
    z-index: -2;
    left: 0em;
    top: 60em;
}

.bgf5 {
    position: absolute;
    width: 13em;
    z-index: -2;
    left: 14em;
    top: 79em;
}

.bgf6 {
    position: absolute;
    width: 16em;
    z-index: -2;
    left: calc(100% - 22em);
    top: 82em;
}

.bgf7 {
    position: absolute;
    width: 16em;
    z-index: -2;
    left: 0em;
    top: 104em;
}

.bgf8 {
    position: absolute;
    width: 13em;
    z-index: -2;
    left: calc(100% - 16em);
    top: 105em;
}

/* animation effects1 */
@keyframes animFocusNews {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.85;
    }
}

@-webkit-keyframes animFocusNews {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.85;
    }
}

@-moz-keyframes animFocusNews {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.85;
    }
}

@-ms-keyframes animFocusNews {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.85;
    }
}

/* animation effects1 */
@keyframes animFocusNavi {
    from {
        background-color: #ffffff;
    }
    to {
        background-color: #dcdddd;
    }
}

@-webkit-keyframes animFocusNavi {
    from {
        background-color: #ffffff;
    }
    to {
        background-color: #dcdddd;
    }
}

@-moz-keyframes animFocusNavi {
    from {
        background-color: #ffffff;
    }
    to {
        background-color: #dcdddd;
    }
}

@-ms-keyframes animFocusNavi {
    from {
        background-color: #ffffff;
    }
    to {
        background-color: #dcdddd;
    }
}

/* animation effects3 */
@keyframes animShowMenu {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes animShowMenu {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

@-moz-keyframes animShowMenu {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

@-ms-keyframes animShowMenu {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

/* animation effects4 */
@keyframes animFocusMenuItem {
    from {
        background-color: rgba(255,255,255,0.85);
    }
    to {
        background-color: rgba(220, 221, 221,0.85);
    }
}

@-webkit-keyframes animFocusMenuItem {
    from {
        background-color: rgba(255,255,255,0.85);
    }
    to {
        background-color: rgba(220, 221, 221,0.85);
    }
}

@-moz-keyframes animFocusMenuItem {
    from {
        background-color: rgba(255,255,255,0.85);
    }
    to {
        background-color: rgba(220, 221, 221,0.85);
    }
}

@-ms-keyframes animFocusMenuItem {
    from {
        background-color: rgba(255,255,255,0.85);
    }
    to {
        background-color: rgba(220, 221, 221,0.85);
    }
}

/* animation effects5 */
@keyframes animRotateZ360 {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes animRotateZ360 {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}

@-moz-keyframes animRotateZ360 {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}

@-ms-keyframes animRotateZ360 {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}

/* animation effects6 */
@keyframes animSimpleSelect {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.5;
    }
}

@-webkit-keyframes animSimpleSelect {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.5;
    }
}

@-moz-keyframes animSimpleSelect {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.5;
    }
}

@-ms-keyframes animSimpleSelect {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.5;
    }
}