@charset "utf-8";

/*  =========================================================================

    Native - Micro framework

    ========================================================================= */

/*  Enviromental appearance fix
    ========================================================================= */
html {
}
body {
    font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, 'MS PGothic', sans-serif;
    font-size: .9em;
    line-height: 1.5;
}
@media screen and (orientation: landscape) {
    body {font-size: .9em;}
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    border-collapse: collapse;
    margin: 1em 0;
    padding: 0;
}
hr.blank {
    margin: .75em 0;
    visibility: hidden;
}
hr.dotted {
    border-top-style: dotted;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0; padding: 0;
    font-weight: normal;
    display: block;
}
strong {
    font-weight: normal;
}
em,
address {
    font-style: normal;
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
blockquote {
    padding: 1.25em;
    margin: 1.25em 0 0 0;
    background-color: #f1f1f1;
    border-radius: .25em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.27;
    font-size: 1em;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a,
li > a,
.block,
span.block > a {
    display: block;
}
.block.block-center {
    margin: 0 auto;
}
.block.block-left {
    margin-left: 0;
    margin-right: auto;
}
.block.block-right {
    margin-left: auto;
    margin-right: 0;
}

img.block,
img.block[aria-orientation=horizontal] {
    display: block;
    max-width: 100%;
    height: auto;
}
img.block[aria-orientation=vertical] {
    display: block;
    max-height: 100%;
    width: auto;
}
img.block.block-fit,
img.block.block-fit[aria-orientation=horizontal] {
    width: 100%;
}
img.block.block-fit[aria-orientation=vertical] {
    height: 100%;
}
img.block.bordered {
    border: 1px solid rgba(80, 80, 80, 0.25);
}
img.block.as-inline {
    display: inline-block;
}

.crop {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.crop:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.crop.crop-61-35:before {
    padding-top: 57%;
}
.crop.crop-4-3:before {
    padding-top: 75%;
}
@media screen and (max-width: 780px) {
    .crop.crop-md-61-35:before {
        padding-top: 57%;
    }
}
@media screen and (max-width: 480px) {
    .crop.crop-sd-61-35:before {
        padding-top: 57%;
    }
}
.crop > img.block {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
}
.hidden {
    display: none !important;
}
.invisible {
    visibility: hidden !important;
}
.text-center {
    text-align: center !important;
}
.text-right {
    text-align: right !important;
}
.text-medium {
    font-size: 1.1em;
}
.text-large {
    font-size: 1.25em;
}
.text-extra-large {
    font-size: 1.65em;
}
.text-small {
    font-size: .88em;
}
.text-serif {
    font-family: Times, "Hiragino Mincho ProN", YuMincho, "MS PMincho", serif;
}
.text-primary {
    color: #19aacc;
}
.text-primary-dark {
    color: #355f7b;
}
.text-warn {
    color: #e8747f;
}
.text-danger {
    color: #c21323;
}
.text-bold {
    font-weight: bold;
}
.text-thin,
.text-normal {
    font-weight: normal !important;
}
.text-caption {
    padding-top: .5em;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.shows-under-md,
.shows-under-sd,
.shows-under-md-inline,
.shows-under-sd-inline {
    display: none !important;
}
.hides-under-md,
.hides-under-sd {
}

/*  Layout structures
    ========================================================================= */
.container {
    width: 100%;
}
.container.header {
    z-index: 5000;
}
.container > article > main,
.container > article > header,
.container > article > section,
.container > article > section .wrapper {
    position: relative;
    margin: 0 auto;
    width: 980px;
    padding: 0 1em;
    text-align: left;
}
.container > article > main.full,
.container > article > header.full,
.container > article > section.full {
    margin: 0;
    width: 100%;
    padding: 0;
}
.container > article > header.medium,
.container > article > section.medium {
    width: 88%;
}
.container > article > header.small,
.container > article > section.small {
    width: 78%;
}
.container > article > header.tiny,
.container > article > section.tiny {
    width: 70%;
}
.container > article > header.auto,
.container > article > section.auto {
    width: auto;
}
.container > article > * .edge-bounds {
    position: relative;
}
.container > article > * .edge {
    position: absolute;
}
.container > article > * .edge.top    { top: 4%;}
.container > article > * .edge.middle { top: 50%; margin-top: -.5em; }
.container > article > * .edge.bottom { bottom: 4%; }
.container > article > * .edge.right { right: 4%; }
.container > article > .full   .edge.right { right: 0; }
.container > article > .medium .edge.right { right: 6%; }
.container > article > .small  .edge.right { right: 11%; }
.container > article > .tiny   .edge.right { right: 15%; }
.container > article > * .edge.left { left: 4%;}
.container > article > .full   .edge.left { right: 0; }
.container > article > .medium .edge.left { right: 6%; }
.container > article > .small  .edge.left { right: 11%; }
.container > article > .tiny   .edge.left { right: 15%; }
.main.container article {
    padding-top: 3em;
    padding-bottom: 5em;
}
.main.container section {
    margin-top: 1.5em;
}
.main.container section.padded {
    margin-top: 3.5em;
}
.main.container section.padded-minor {
    margin-top: 2.25em;
}
.main.container section.padded-extra-minor {
    margin-top: 1.88em;
}

/*  Floated-column structures
    ========================================================================= */
dl.default {
    display: block;
    margin: 0;
}
dl.default > dt {
    display: block;
    margin: 2em 0 1em 0;
}
dl.default > dd {
    display: block;
    margin: 0 0 1.5em 0;
}


.row {
    display: block;
    *zoom: 1;
    width: 100%;
}
.row::after {
    content: " ";
    display: table;
    clear: both;
}
ul.row,
ol.row,
dl.row {
    margin: 0;
    padding: 0;
}
ul.row > li,
ol.row > li {
    list-style-type: none;
}
dl.row > dt,
dl.row > dd {
    margin: 0;
}
.row > .col {
    box-sizing: border-box;
    display: block;
    float: left;
}
.row > .col.cr {
    clear: both;
}

.row.row-sp0-5 {
    width: 100%;
    width: -webkit-calc(100% + .5em);
    width: calc(100% + .5em);
    margin-left: -.5em;
}
.row.row-sp0-5 > .col {
    padding-left: .5em;
}
.row.row-sp {
    width: 100%;
    width: -webkit-calc(100% + 1em);
    width: calc(100% + 1em);
    margin-left: -1em;
}
.row.row-sp > .col {
    padding-left: 1em;
}
.row.row-spx1-5 {
    width: 100%;
    width: -webkit-calc(100% + 1.5em);
    width: calc(100% + 1.5em);
    margin-left: -1.5em;
}
.row.row-spx1-5 > .col {
    padding-left: 1.5em;
}
.row.row-spx2 {
    width: 100%;
    width: -webkit-calc(100% + 2em);
    width: calc(100% + 2em);
    margin-left: -2em;
}
.row.row-spx2 > .col {
    padding-left: 2em;
}

.col.col-1,
.col.col-1-1,
.col.col-2-2,
.col.col-3-3,
.col.col-4-4,
.col.col-5-5,
.col.col-6-6 {
    width: 100%;
}
.col.col-2,
.col.col-1-2,
.col.col-2-4,
.col.col-3-6 {
    width: 50%;
}
.col.col-3,
.col.col-1-3,
.col.col-2-6 {
    width: 33.332%;
}
.col.col-2-3,
.col.col-4-6 {
    width: 66.662%;
}
.col.col-4,
.col.col-1-4 {
    width: 25%;
}
.col.col-3-4 {
    width: 75%;
}
.col.col-5,
.col.col-1-5 {
    width: 20%;
}
.col.col-2-5 {
    width: 40%;
}
.col.col-3-5 {
    width: 60%;
}
.col.col-4-5 {
    width: 80%;
}
.col.col-6,
.col.col-1-6 {
    width: 16.665%;
}
.col.col-5-6 {
    width: 83.332%;
}
.col.col-8 {
    width: 12.5%;
}
.col.col-10 {
    width: 10%;
}
.col.col-20 {
    width: 5%;
}

/*  Tabled-column structures
    ========================================================================= */
.columns {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.columns.no-fixed {
    table-layout: auto;
}
.columns.no-full {
    width: auto !important;
}
.columns > .line {
    display: table-row;
}
.columns > .col,
.columns > .line > .col {
    display: table-cell;
    vertical-align: top;
}
.columns.vertical-middle > .col,
.columns.vertical-middle > .line > .col {
    vertical-align: middle;
}
ul.columns, ul.columns > .line,
ol.columns, ol.columns > .line {
    margin: 0;
    padding: 0;
}
ul.columns > li, ul.columns > .line > li,
ol.columns > li, ol.columns > .line > li, {
    list-style-type: none;
}
dl.columns > dt.col,
dl.columns > dd.col {
    margin-left: 0;
}

.columns.columns-sp {
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 1.5em 0;
    margin-top: 1.5em;
    margin-left: -1.5em;
    width: 100%;
    width: -webkit-calc(100% + 3em - 2px);
    width: calc(100% + 3em - 2px);
}

.columns.columns-sp-half {
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: .75em 0;
    margin-top: .75em;
    margin-left: -.75em;
    width: 100%;
    width: -webkit-calc(100% + 1.5em - 2px);
    width: calc(100% + 1.5em - 2px);
}

.columns.columns-sp-quarter {
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: .5em 0;
    margin-top: .5em;
    margin-left: -.5em;
    width: 100%;
    width: -webkit-calc(100% + 1em - 2px);
    width: calc(100% + 1em - 2px);
}

/*  Herounit appearances
    ========================================================================= */
.container.hero {
    background-color: #edecea;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}
.container.hero article.image {
    overflow: hidden;
}
.container.hero article.image section {
    max-width: 1120px;
    margin: 0 auto;
}
.container.hero article.image section > .slide {
    display: block;
    position: relative;
    width: 180%;
    margin-left: -38%;
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    overflow: hidden;
}
.container.hero article.image section > .slide:before {
    content: "";
    display: block;
    padding-top: 21.8%;
}
.container.hero article.image section > .slide > img.block {
    position: absolute;
    top: 25%; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    width: 100%;
    height: auto;
    max-height: 630px;
    max-width: 2000px;
}

/*  Image utility apparance
    ========================================================================= */
.image {
    padding: .5em 0;
    margin: 1em 0;
}
.image.image-center > img.block {
    margin: 0 auto;
}

/*  =========================================================================
    Lesser HDPI - Responsive breakpoint
    ========================================================================= */
@media screen and (max-width: 1120px) {
    .container > article > main,
    .container > article > header,
    .container > article > section,
    .container > article > section .wrapper {
        position: relative;
        margin: 0 auto;
        width: 92%;
        padding: 0 4%;
        text-align: left;
    }
}

/*  =========================================================================
    MDPI - Responsive breakpoint
    ========================================================================= */
@media screen and (max-width: 780px) {
    .col.col-md-1,
    .col.col-md-1-1,
    .col.col-md-2-2,
    .col.col-md-3-3,
    .col.col-md-4-4,
    .col.col-md-5-5,
    .col.col-md-6-6 {
        width: 100%;
    }
    .col.col-md-2,
    .col.col-md-1-2,
    .col.col-md-2-4,
    .col.col-md-3-6 {
        width: 50%;
    }
    .col.col-md-3,
    .col.col-md-1-3,
    .col.col-md-2-6 {
        width: 33.332%;
    }
    .col.col-md-2-3,
    .col.col-md-4-6 {
        width: 66.662%;
    }
    .col.col-md-4,
    .col.col-md-1-4 {
        width: 25%;
    }
    .col.col-md-3-4 {
        width: 75%;
    }
    .col.col-md-5,
    .col.col-md-1-5 {
        width: 20%;
    }
    .col.col-md-2-5 {
        width: 40%;
    }
    .col.col-md-3-5 {
        width: 60%;
    }
    .col.col-md-4-5 {
        width: 80%;
    }
    .col.col-md-6,
    .col.col-md-1-6 {
        width: 16.665%;
    }
    .col.col-md-5-6 {
        width: 83.332%;
    }
    .col.col-md-8 {
        width: 12.5%;
    }
    .col.col-md-10 {
        width: 10%;
    }
    .col.col-md-20 {
        width: 5%;
    }
    .row > .col.cr-md {
        clear: both;
    }
    .row > .col.cr.cr-none {
        clear: none;
    }

    .columns.collapse-md {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .columns.collapse-md > .line {
        display: block !important;
    }
    .columns.collapse-md > .col,
    .columns.collapse-md > .line > .col {
        display: block;
        width: 100% !important;
    }

    .shows-under-md {
        display: block !important;
    }
    .shows-under-md-inline {
        display: inline !important;
    }
    .hides-under-md {
        display: none !important;
    }

    .image.image-slideable-md {
        overflow-x: scroll;
    }
    .image.image-slideable-md > img,
    .image.image-slideable-md > a > img {
        width: auto;
        max-width: none;
    }

    img.block.block-fit-md,
    img.block.block-fit-md[aria-orientation=horizontal] {
        width: 100%;
    }
    img.block.block-fit-md[aria-orientation=vertical] {
        height: 100%;
    }
}

/*  =========================================================================
    SDPI - Responsive breakpoint
    ========================================================================= */
@media screen and (max-width: 480px) {
    .col.col-sd-1,
    .col.col-sd-1-1,
    .col.col-sd-2-2,
    .col.col-sd-3-3,
    .col.col-sd-4-4,
    .col.col-sd-5-5,
    .col.col-sd-6-6 {
        width: 100%;
    }
    .col.col-sd-2,
    .col.col-sd-1-2,
    .col.col-sd-2-4,
    .col.col-sd-3-6 {
        width: 50%;
    }
    .col.col-sd-3,
    .col.col-sd-1-3,
    .col.col-sd-2-6 {
        width: 33.332%;
    }
    .col.col-sd-2-3,
    .col.col-sd-4-6 {
        width: 66.662%;
    }
    .col.col-sd-4,
    .col.col-sd-1-4 {
        width: 25%;
    }
    .col.col-sd-3-4 {
        width: 75%;
    }
    .col.col-sd-5,
    .col.col-sd-1-5 {
        width: 20%;
    }
    .col.col-sd-2-5 {
        width: 40%;
    }
    .col.col-sd-3-5 {
        width: 60%;
    }
    .col.col-sd-4-5 {
        width: 80%;
    }
    .col.col-sd-6,
    .col.col-sd-1-6 {
        width: 16.665%;
    }
    .col.col-sd-5-6 {
        width: 83.332%;
    }
    .col.col-sd-8 {
        width: 12.5%;
    }
    .col.col-sd-10 {
        width: 10%;
    }
    .col.col-sd-20 {
        width: 5%;
    }
    .row > .col.cr-sd {
        clear: both;
    }
    .row > .col.cr-md.cr-md-none {
        clear: none;
    }

    .columns.collapse-sd {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .columns.collapse-sd > .line {
        display: block !important;
    }
    .columns.collapse-sd > .col,
    .columns.collapse-sd > .line > .col {
        display: block !important;
        width: 100% !important;
    }

    .shows-under-sd {
        display: block !important;
    }
    .shows-under-sd-inline {
        display: inline !important;
    }
    .hides-under-sd {
        display: none !important;
    }

    .image.image-slideable-md > img,
    .image.image-slideable-md > a > img {
        display: inline;
        width: auto;
        max-width: none;
        zoom: 75%;
    }

    img.block.block-fit-sd,
    img.block.block-fit-sd[aria-orientation=horizontal] {
        width: 100%;
    }
    img.block.block-fit-sd[aria-orientation=vertical] {
        height: 100%;
    }

}