/*
KANARU RESET & BASE CSS
Author: KANARU
Author URI: http://www.kanaru.com/
Version: 1.0
*/

/* ==========================================
 Reset
========================================== */
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    text-decoration: none;
    vertical-align: baseline;
}
html {
    width: 100%;
    height: 100vh;
}
body {
    position: relative;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    font-size: 16px;
    font-family:  Arial, Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-family: "メイリオ", meiryo, "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
ul,
ol { list-style: none; }
table {
    table-layout: fixed;
    border-collapse: collapse;
}
table th,
table td { vertical-align: middle; }
/* ==========================================
 Common
========================================== */
body { color: #333; }
/* 非表示 */
.hide { visibility: hidden; }
.disnon { display: none; }
/* ==========================================
 Header
========================================== */
#header {
    position: relative;
    padding: 10px 0;
}
@media screen and (max-width: 767px) {
    #header { padding: 10px; }
}
h1.description { font-size: 0.75em; }
#hed-company {
    -webkit-align-self: center;
    align-self: center;
}
/* ==========================================
 Footer
========================================== */
@media screen and (max-width: 767px) {
    #footer { padding: 0 10px; }
}
#copy {
    padding: 10px;
    font-size: 12px;
}
#by { margin-top: 3px; }
/* ==========================================
 Container
========================================== */
@media screen and (max-width: 767px) {
    .container { width: auto; }
}
@media screen and (min-width: 768px) {
    .container {
        margin: 0 auto;
        width: 748px;
    }
}
@media screen and (min-width: 992px) {
    .container { width: 972px; }
}
@media screen and (min-width: 1200px) {
    .container { width: 1180px; }
}
/* ==========================================
 Flexbox
========================================== */
.flex {
    display: -webkit-flex;
    display: flex;
}
.flex-wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap-reverse {
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}
.flex-item {
    -webkit-flex: 1;
    flex: 1;
}
/* サイズ別 */
.flex-row,
.flex-xs-row {
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-row.flex-reverse,
.flex-xs-row.flex-reverse {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-row > .flex-item ~ .flex-item,
.flex-xs-row > .flex-item ~ .flex-item { margin: 0 0 0 15px; }
.flex-col,
.flex-xs-col {
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex-col.flex-reverse,
.flex-xs-col.flex-reverse {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.flex-col > .flex-item ~ .flex-item,
.flex-xs-col > .flex-item ~ .flex-item { margin: 15px 0 0 0; }
@media screen and (min-width: 768px) {
    .flex-sm-row {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    .flex-sm-row.flex-reverse {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    .flex-sm-row > .flex-item ~ .flex-item { margin: 0 0 0 15px; }
    .flex-sm-col {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .flex-sm-col.flex-reverse {
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .flex-sm-col > .flex-item ~ .flex-item { margin: 15px 0 0 0; }
}
@media screen and (min-width: 992px) {
    .flex-md-row {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    .flex-md-row.flex-reverse {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    .flex-md-row > .flex-item ~ .flex-item { margin: 0 0 0 15px; }
    .flex-md-col {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .flex-md-col.flex-reverse {
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .flex-md-col > .flex-item ~ .flex-item { margin: 15px 0 0 0; }
}
@media screen and (min-width: 1200px) {
    .flex-lg-row {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    .flex-lg-row.flex-reverse {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    .flex-lg-row > .flex-item ~ .flex-item { margin: 0 0 0 15px; }
    .flex-lg-col {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .flex-lg-col.flex-reverse {
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .flex-lg-col > .flex-item ~ .flex-item { margin: 15px 0 0 0; }
}
/* ==========================================
 Float
========================================== */
.fl { float: left; }
.fr { float: right; }
.cf:after {
    content:" ";
    display:block;
    clear:both;
}
/* ==========================================
 Centering
========================================== */
.tbcenter {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.lrcenter {
    display: block;
    margin: 0 auto;
}
/* ==========================================
 Text
========================================== */
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.note { color: #c00; }
/* ==========================================
 Image
========================================== */
.img-fit {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.img-responsive {
    max-width: 100%;
    height: auto;
}
/* ==========================================
 Link
========================================== */
.link-block {
    display: inline-block;
    padding: 0 30px;
    background: #333;
    color: #fff;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
}
/* ==========================================
 Form
========================================== */
form .form-item ~ .form-item { margin-top: 15px; }
input,
textarea,
select,
button {
    padding: 0 10px;
    width: 100%;
    height: 40px;
    box-shadow: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    font-weight: normal;
    line-height: 1em;
    max-width:100%;
}
textarea {
    padding: 10px;
    height: auto;
    line-height: inherit;
}
label {
    margin-bottom: 8px;
    display: block;
    font-weight: bold;
}
input[type="checkbox"]{
    width: auto;
    height: 15px;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-align: left !important;
}

.btn {
    display: block;
    margin: 30px auto 0;
    padding: 10px 30px;
    width: auto;
    background: #eee;
    text-align: center;
    text-decoration: none;
}
.form-checkbox label,
.form-radio label { font-weight: normal; }
.form-checkbox.inline label ~ label,
.form-radio.inline label ~ label { margin-left: 1em; }
.req { position: relative; }
.req:after {
    position: absolute;
    top: 50%;
    margin-left: 1em;
    padding: 5px 8px;
    -webkit-align-self: center;
    align-self: center;
    content: "\5FC5\9808";
    background: #c00;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* ==========================================
 Navi
========================================== */
.navibar .navibar-header { display: none; }
.navibar .navibar-content > ul {
    display: -webkit-flex;
    display: flex;
}
.navibar .navibar-content > ul > li {
    position: relative;
    -webkit-flex: 1;
    flex: 1;
}
/* 二階層 */
.navibar .navibar-content li ul { display: none; }
/* リンク */
.navibar .navibar-content a {
    display: block;
    text-align: center;
    line-height: 50px;
}
.navibar .navibar-content a:hover { background: #eee; }
@media screen and (min-width: 768px) {
    .navibar-responsive .navibar-content li:hover > ul {
        display: block;
        position: absolute;
        width: 100%;
        z-index: 999999;
    }
}
@media screen and (max-width: 767px) {
    .navibar-responsive .navibar-header {
        position: relative;
        display: block;
        height: 50px;
        width: 50px;
        background: #333;
        color: #fff;
        text-align: center;
        cursor: pointer;
        z-index: 999999;
    }
    .navibar-responsive .navibar-header span,
    .navibar-responsive .navibar-header span:before,
    .navibar-responsive .navibar-header span:after {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        transition: .2s;
    }
    .navibar-responsive .navibar-header span {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -1px 0 0 -12px;
    }
    .navibar-responsive .navibar-header span:before { margin: -5px 0 0; }
    .navibar-responsive .navibar-header span:after { margin: 8px 0 0; }
    .navibar-responsive .navibar-header.close span {
        margin-left: 0;
        width: 0;
    }
    .navibar-responsive .navibar-header.close span:before {
        margin: 2px 0 0 -12px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .navibar-responsive .navibar-header.close span:after {
        margin: -2px 0 0 -12px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .navibar-responsive .navibar-content {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        transition: .2s;
        z-index: 999998;
    }
    .navibar-responsive .navibar-content.active { left: 0; }
    .navibar-responsive .navibar-content ul {
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        color: #fff;
    }
    .navibar-responsive .navibar-content > ul > li {
        -webkit-flex: none;
        flex: none;
    }
    .navibar-responsive .navibar-content a {
        color: #fff !important;
        font-size: 1.5em;
    }
    .navibar-responsive .navibar-content a:hover { background: rgba(255, 255, 255, 0.2); }
}
/* ==========================================
 Pagination
========================================== */
#pagination { margin-top: 50px; }
#pagination ul { text-align: center; }
#pagination ul li {
    display: inline-block;
    border: 1px solid #ddd;
}
#pagination ul li ~ li { border-left: none; }
#pagination ul .active {
    background: #eee;
    font-weight: bold;
}
#pagination ul li a {
    display: block;
    padding: 8px 10px;
}
/* ==========================================
 Tab
========================================== */
.tab-menu ul {
    display: -webkit-flex;
    display: flex;
    z-index: 9999;
}
.tab-menu li {
    -webkit-flex: 1;
    flex: 1;
    padding: 10px;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.tab-menu li ~ li { margin-left: 5px; }
.tab-menu .active,
.tab-menu .last { background: #fff; }
.tab-content {
    border: 1px solid #ddd;
}
.tab-title { display: none; }
.tab-body {
    display: none;
    padding: 30px;
}
.tab-body.active {
    display: block;
    background: #fff;
}
@media screen and (min-width: 768px) {
    .tab-menu li.active,
    .tab-menu li.last { border-bottom-color: transparent; }
    .tab-content { margin-top: -1px; }
    .tab-body.last {
        display: block;
        background: #fff;
    }
}
@media screen and (max-width: 767px) {
    .tab-menu { display: none; }
    .tab-title {
        display: block;
        z-index: 9999;
        padding: 10px;
        background: #eee;
        cursor: pointer;
    }
    .tab-title ~ .tab-title { border-top: 1px solid #ddd; }
    .tab-title.active { border-bottom: 1px solid #ddd; }
}
/* ==========================================
 Accordion
========================================== */
.accordion-content { border: 1px solid #ddd; }
.accordion-content ~ .accordion-content { margin-top: 15px; }
.accordion-head {
    padding: 10px;
    background: #eee;
    cursor: pointer;
}
.accordion-body {
    padding: 10px;
    border-top: 1px solid #ddd;
}
/* ==========================================
 Media
========================================== */
.media .media-obj,
.media .media-text {
    display: table-cell;
    vertical-align: top;
}
.media.media-left .media-text { padding-left: 15px; }
.media.media-right .media-text { padding-right: 15px; }
.media .media-title {
    margin-bottom: 5px;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .media .media-obj,
    .media .media-text {
        display: list-item;
        list-style: none;
    }
    .media .media-obj img {
        display: block;
        margin: 0 auto;
    }
    .media.media-left .media-text { padding: 15px 0 0 !important; }
    .media.media-right .media-text { padding: 0 0 15px !important; }
}