@charset "utf-8";

/* ────────────────────── *
 *                                              *
 * コンテンツラッパー                           *
 *                                              *
 * ────────────────────── */

.contents {
    clear: both;
}
.contents h2 {
    font-size: 36px;
    text-align: center;
    margin: 0 auto 60px;
    position: relative;
}
.contents h2:before {
    content: "";
    background: #2a2a6e;
    width: calc(80px * 1.414);
    height: 1px;
    position: absolute;
    right: 50%;
    top: 50%;
    z-index: -1;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translate(50%, -50%) rotate(-45deg);
    transform: translate(50%, -50%) rotate(-45deg);
}
.contents h2 span {
    letter-spacing: 0.2em;
    display: inline-block;
    padding: 0 10px;
    position: relative;
}
.contents h2 span:before {
    content: "";
    background: #fff;
    width: 100%;
    height: 44px;
    position: absolute;
    right: 50%;
    top: 50%;
    z-index: -1;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}
.contents #history h2 span:before {
    background: #f8f8fc;
}

/* ページネーション */
.contents ul.pagination {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 20px;
    margin: 0 auto 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.contents ul.pagination li {
    text-align: center;
    width: 330px;
    border: 1px solid #2a2a6e;
    position: relative;
}
.contents ul.pagination li a {
    color: #222;
    display: block;
    padding: 25px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.contents ul.pagination li a:hover {
    color: #fff;
    background: #2a2a6e;
}
.contents ul.pagination li a:after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* ────────────────────── *
 *                                              *
 * タイトル                                     *
 *                                              *
 * ────────────────────── */

#title {
    background: url("../../company/image/bg-title.jpg") no-repeat center center / cover;
    clear: both;
    width: 100%;
    height: 400px;
    margin: 0 auto 120px;
    position: relative;
}
#title h1 {
    font-size: 46px;
    line-height: 100px;
    background: #fff;
    text-align: center;
    width: 800px;
    margin: 0 auto;
    position: absolute;
    top: -50px;
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}
#title #scroll {
    background: #222;
    width: 1px;
    height: 80px;
    position: absolute;
    right: 50%;
    bottom: -40px;
    overflow: hidden;
    -webkit-transform: translateX(50% - 1px);
    transform: translateX(50% - 1px);
}
#title #scroll span {
    background: #fff;
    display: block;
    width: 1px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: SCROLL 1s ease-out 0s infinite;
            animation: SCROLL 1s ease-out 0s infinite;
    animation-fill-mode: forwards;
}
@keyframes SCROLL {
      0% {top: -40px;}
    100% {top: 100%;}
}
@-webkit-keyframes SCROLL {
      0% {top: -40px;}
    100% {top: 100%;}
}

/* ────────────────────── *
 *                                              *
 * 法人概要                                     *
 *                                              *
 * ────────────────────── */

#company {
    clear: both;
    padding-bottom: 100px;
    position: relative;
    z-index: 0;
}
#company .inner {
    width: 1000px;
    margin: 0 auto;
}
#company .inner table {
    font-size: 18px;
    line-height: 1.6;
    width: 100%;
    border-spacing: 0;
    border: none;
    border-collapse: collapse;
}
#company .inner table tr:nth-of-type(odd) {
    background: #f2f2f9;
}
#company .inner table th {
    font-size: 20px;
    color: #2a2a6e;
    text-align: left;
    width: 270px;
    padding: 20px 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#company .inner table td {
    padding: 20px 40px 20px 0;
}
#company .inner table td .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#company .inner table td a.btn-access {
    color: #fff;
    background: #2a2a6e;
    display: inline-block;
    padding: 15px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
#company .inner table td a.btn-access:hover {
    opacity: 0.7;
}

/* ────────────────────── *
 *                                              *
 * 沿革                                         *
 *                                              *
 * ────────────────────── */

#history {
    background: #f8f8fc;
    clear: both;
    padding: 100px 0;
    position: relative;
    z-index: 0;
}
#history .inner {
    width: 1000px;
    margin: 0 auto;
}
#history .inner table {
    font-size: 18px;
    line-height: 1.6;
    background: #fff;
    width: 100%;
    border-spacing: 0;
    border: none;
    border-top: 1px solid #d2d2d2;
    border-collapse: collapse;
}
#history .inner table th {
    font-size: 20px;
    color: #2a2a6e;
    text-align: left;
    width: 270px;
    padding: 20px 40px;
    border-bottom: 1px solid #d2d2d2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#history .inner table td {
    padding: 20px 40px 20px 0;
    border-bottom: 1px solid #d2d2d2;
}

/* ────────────────────── *
 *                                              *
 * アクセス                                     *
 *                                              *
 * ────────────────────── */

#access {
    clear: both;
    padding: 100px 0;
    position: relative;
    z-index: 0;
}
#access .inner {
    width: 1000px;
    margin: 0 auto;
}
#access .inner #route {
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#access .inner #route dl {
    background: #f2f2f9;
    width: 490px;
    padding: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#access .inner #route dl dt {
    font-size: 26px;
    color: #2a2a6e;
    padding-bottom: 10px;
    padding-left: 40px;
    margin-bottom: 15px;
    margin-left: -40px;
    border-bottom: 1px solid #2a2a6e;
}
#access .inner #route dl dt:before {
    content: "◆ ";
}
#access .inner #route dl dd {
    font-size: 18px;
    line-height: 1.7;
}
#access .inner dl#address {
    font-size: 22px;
    line-height: 1.5;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#access .inner dl#address dd {
    font-size: 20px;
}
#access .inner dl#address dd a {
    color: #fff;
    background: #2a2a6e;
    display: block;
    padding: 15px 50px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
#access .inner dl#address dd a:hover {
    opacity: 0.7;
}