@charset "UTF-8";

html,
body {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 14px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

html *,
body * {
    box-sizing: border-box;
}

hr {
    border: none;
    border-top: 1px #ddd solid;
}

@media (min-width: 768px),
print {
    hr {
        margin: 40px 0;
    }
}

@media screen and (max-width: 768px) {
    hr {
        margin: 30px 0;
    }
}

img {
    vertical-align: top;
}

em {
    font-style: normal;
}

.area-header-brand,
.area-footer {
    box-sizing: border-box;
    line-height: 1.6;
    position: relative;
    color: #000;
}

.area-header-brand *,
.area-footer * {
    box-sizing: border-box;
}

.area-header-brand *:lang(ja),
.area-footer *:lang(ja) {
    word-break: break-all;
    word-wrap: break-word;
}

.area-header-brand a,
.area-footer a {
    color: #000;
    text-decoration: none;
}

.area-header-brand img,
.area-footer img {
    vertical-align: top;
}

.area-contents a {
    color: #ff7200;
}

.area-contents {
    font-size: 14px;
}

@media (min-width: 768px),
print {
    .area-contents {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 768px) {
    .area-contents {
        padding-bottom: 30px;
    }

    .area-contents img {
        max-width: 100%;
    }
}

@media (min-width: 768px),
print {
    .area-contents.area-contents-no-margin {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    .area-contents.area-contents-no-margin {
        padding-bottom: 0;
    }
}

@media (min-width: 768px),
print {
    .area-header-brand {
        height: 80px;
    }
}

@media screen and (max-width: 768px) {
    .area-header-brand {
        height: 66px;
    }
}

.area-header-brand ._wrap {
    position: relative;
}

@media (min-width: 768px),
print {
    .area-header-brand ._wrap {
        width: 100%;
        max-width: 1086px;
        margin: 0 auto;
        padding: 0 15px;
    }
}

@media screen and (max-width: 768px) {
    .area-header-brand ._wrap {
        width: auto;
    }
}

.area-header-brand a {
    color: #000;
    text-decoration: none;
    transition-duration: 0.2s;
}

@media (min-width: 768px),
print {
    .area-header-brand a:hover {
        opacity: 0.6;
    }
}

.area-header-brand ul,
.area-header-brand li,
.area-header-brand p,
.area-header-brand h1 {
    padding: 0;
    margin: 0;
}

.area-header-brand ul,
.area-header-brand li {
    list-style: none;
}

.area-header-brand img {
    vertical-align: top;
}

.area-header-brand ._main {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    line-height: 1;
    z-index: 1000;
    border-top: 3px #ff7200 solid;
    border-bottom: 1px #ff7200 solid;
    min-width: 320px;
    background-color: #fff;
}

@media (min-width: 768px),
print {
    .area-header-brand ._main {
        height: 80px;
    }
}

@media screen and (max-width: 768px) {
    .area-header-brand ._main {
        height: 66px;
    }
}

.area-header-brand ._main .head-wrap {
    position: relative;
}

@media (min-width: 768px),
print {
    .area-header-brand ._main ._logo {
        max-width: 210px;
        position: absolute;
        top: 17px;
        left: 15px;
    }

    .area-header-brand ._main ._logo a {
        display: block;
        height: 100%;
    }

    .area-header-brand ._main ._logo img {
        height: 100%;
    }
}

@media screen and (max-width: 768px) {
    .area-header-brand ._main ._logo {
        width: 120px;
        position: absolute;
        top: 18px;
        left: 10px;
    }
}

@media screen and (max-width: 768px) {
    .area-header-brand ._main ._logo a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
}

.area-header-brand ._main ._logo img {
    border: 0;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .area-header-brand ._main ._logo img {
        height: 100%;
        object-fit: contain;
    }
}

.area-header-brand ._main ._text {
    position: absolute;
    font-weight: bold;
}

@media (min-width: 768px),
print {
    .area-header-brand ._main ._text {
        top: 0px;
        left: 230px;
        font-size: 1.28571rem;
        height: 84px;
        line-height: 84px;
    }
}

@media screen and (max-width: 768px) {
    .area-header-brand ._main ._text {
        top: 0;
        left: 145px;
        font-size: 1.14286rem;
        height: 62px;
        line-height: 62px;
    }
}

/* =========================================================
    Footer
   ========================================================= */
.area-footer {
    padding: 0;
    margin: 0;
}

@media (min-width: 768px),
print {
    .area-footer {
        padding: 0 0 40px;
    }
}

.area-footer ._wrap {
    position: relative;
}

@media (min-width: 768px),
print {
    .area-footer ._wrap {
        width: 100%;
        max-width: 1086px;
        margin: 0 auto;
        padding: 0 15px;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._wrap {
        width: auto;
    }
}

.area-footer a {
    color: #000;
    text-decoration: none;
    transition-duration: 0.2s;
}

@media (min-width: 768px),
print {
    .area-footer a:hover {
        opacity: 0.6;
    }
}

.area-footer a img {
    border: 0;
}

.area-footer a[target="_blank"]::after {
    font-family: FontAwesome;
    line-height: 1;
    font-weight: normal;
    content: "\f08e";
    font-weight: normal;
    display: inline-block;
    vertical-align: baseline;
    color: #ff7200;
    margin-left: 5px;
}

.area-footer ul,
.area-footer li {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .area-footer ._show-pc {
        display: none;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._show-sp {
        display: none;
    }
}

/* ---------- ---------- ---------- */
@media (min-width: 768px),
print {
    .area-footer ._area-main {
        padding: 20px 0 40px;
        border-top: 1px #dadada solid;
        border-bottom: 1px #dadada solid;
        box-shadow: 0 -1px #fff inset;
        background-color: #f4f4f4;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._area-main {
        border-top: 1px #dadada solid;
        background-color: #ececec;
    }
}

/* ---------- ---------- ---------- */
.area-footer ._area-top {
    border-top: 1px #dadada solid;
    border-bottom: 1px #dadada solid;
    padding: 15px 0;
}

.area-footer ._area-top ul {
    margin: 0;
}

@media (min-width: 768px),
print {
    .area-footer ._area-top li {
        display: inline-block;
        padding: 0 10px;
        font-size: 0.85714rem;
    }

    .area-footer ._area-top li:first-child {
        padding-left: 0;
    }

    .area-footer ._area-top li+li {
        border-left: 1px #000 solid;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._area-top li {
        text-align: center;
        font-size: 0.78571rem;
    }

    .area-footer ._area-top li+li {
        margin-top: 8px;
    }
}

.area-footer ._area-top li a {
    color: #000;
}

/* ---------- ---------- ---------- */
@media screen and (max-width: 768px) {
    .area-footer .js-footer-brand-target {
        display: none;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list-btn {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list-btn {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0;
        text-align: center;
        background-color: #fff;
        font-size: 1rem;
        font-weight: bold;
        width: 100%;
        padding: 12px 15px;
        border: none;
        border-bottom: 1px #dadada solid;
        cursor: pointer;
        outline: none;
    }

    .area-footer ._brand-list-btn:before {
        content: "";
        width: 5px;
        height: 5px;
        display: inline-block;
        margin-right: 10px;
        margin-top: -5px;
        border-top: solid 2px #000;
        border-right: solid 2px #000;
        transform: rotate(135deg);
        vertical-align: middle;
    }
}

.area-footer ._brand-list-btn.is-open:before {
    margin-top: 3px;
    transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list-btn.is-open+.js-footer-brand-target {
        display: block;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list {
        padding: 20px 0 0 0;
    }
}

.area-footer ._brand-list dl._company {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company {
        width: 100%;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list dl._company+dl._company {
        margin-top: 35px;
    }
}

.area-footer ._brand-list dl._company dt {
    border-bottom: 1px #ff7200 solid;
    color: #ff7200;
    font-weight: bold;
    border-bottom: 1px #dcdcdc solid;
    color: #000;
    font-weight: bold;
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list dl._company dt {
        padding-bottom: 12px;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company dt {
        background-color: #fff;
        padding: 12px 15px;
        font-size: 0.85714rem;
    }
}

.area-footer ._brand-list dl._company dd {
    margin: 0;
}

.area-footer ._brand-list dl._company ._brands {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company ._brands {
        border-top: 1px #dadada solid;
        border-bottom: 1px #dadada solid;
    }
}

.area-footer ._brand-list dl._company ._brand {
    display: flex;
    align-items: center;
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list dl._company ._brand {
        width: 25%;
        margin-top: 10px;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company ._brand {
        width: 50%;
        border-bottom: 1px #dadada solid;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company ._brand:nth-child(odd) {
        border-right: 1px #dadada solid;
    }
}

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

    .area-footer ._brand-list dl._company ._brand:last-child,
    .area-footer ._brand-list dl._company ._brand:nth-child(odd):nth-last-child(2) {
        border-bottom: 0;
    }
}

.area-footer ._brand-list dl._company ._brand a {
    display: table;
    width: 100%;
}

.area-footer ._brand-list dl._company ._brand a[target="_blank"]::after {
    content: '';
}

.area-footer ._brand-list dl._company ._brand ._image,
.area-footer ._brand-list dl._company ._brand ._name {
    display: table-cell;
    vertical-align: middle;
}

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

    .area-footer ._brand-list dl._company ._brand ._image,
    .area-footer ._brand-list dl._company ._brand ._name {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list dl._company ._brand ._image {
        width: 70px;
        height: 70px;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company ._brand ._image {
        width: 52px;
        height: 37px;
        padding-left: 15px;
    }
}

.area-footer ._brand-list dl._company ._brand ._image span {
    display: inline-block;
    border-radius: 50%;
    border: 1px #e5e5e5 solid;
    background-color: #fff;
    overflow: hidden;
    vertical-align: middle;
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list dl._company ._brand ._image span {
        width: 70px;
        height: 70px;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company ._brand ._image span {
        width: 37px;
        height: 37px;
    }
}

.area-footer ._brand-list dl._company ._brand ._image span img {
    width: 100%;
    vertical-align: middle;
}

.area-footer ._brand-list dl._company ._brand ._name {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 1rem;
}

@media screen and (max-width: 768px) {
    .area-footer ._brand-list dl._company ._brand ._name {
        padding-right: 15px;
        font-size: 0.78571rem;
    }
}

.area-footer ._brand-list ._company-column-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list ._company-column-2 ._company {
        width: calc(50% - 12px);
    }
}

@media (min-width: 768px),
print {
    .area-footer ._brand-list ._company-column-2 dl._company {
        margin-top: 35px;
    }

    .area-footer ._brand-list ._company-column-2 dl._company ._brand {
        width: 50%;
    }
}

/* ---------- ---------- ---------- */
.area-footer ._area-bottom {
    background-color: #fff;
}

@media (min-width: 768px),
print {
    .area-footer ._area-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 30px 0 0;
    }
}

.area-footer ._area-bottom ._corporate {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .area-footer ._area-bottom ._corporate {
        border-bottom: 1px #dedede solid;
    }
}

.area-footer ._area-bottom ._corporate a {
    display: flex;
    align-items: center;
}

@media (min-width: 768px),
print {
    .area-footer ._area-bottom ._corporate a {
        font-size: 0.85714rem;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._area-bottom ._corporate a {
        padding: 7px 15px;
        justify-content: center;
        font-size: 0.85714rem;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._area-bottom ._corporate a ._image {
        width: 40px;
        margin-right: 12px;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._area-bottom ._corporate a ._image {
        width: 30px;
        margin-right: 10px;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._area-bottom ._info {
        float: left;
    }
}

.area-footer ._area-bottom ._copy {
    color: #a2a2a2;
}

@media screen and (max-width: 768px) {
    .area-footer ._area-bottom ._copy {
        padding: 15px 0 20px 0;
        text-align: center;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._area-bottom ._copy small {
        font-size: 0.85714rem;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._area-bottom ._copy small {
        font-size: 0.78571rem;
    }
}

@media (min-width: 768px),
print {
    .area-footer ._area-bottom ._copy ._logo {
        width: 141px;
        margin: 0 0 15px auto;
    }
}

@media screen and (max-width: 768px) {
    .area-footer ._area-bottom ._copy ._logo {
        width: 115px;
        margin: 0 auto 10px;
    }
}

.area-footer ._area-bottom ._copy ._logo img {
    width: 100%;
    vertical-align: top;
}