@charset "utf-8";

.guideTopHead {padding-bottom: 1rem; border-bottom: 4px solid #000}
@media screen and (max-width: 767px) {
    .guideTopHead {border-bottom: 3px solid #000}
}


.guideTopArea {background: #000; }
.guideTopArea__inner {position: relative; display: flex; padding-top: 90px; margin: 0 auto; max-width: 1258px; align-items: center; background: #000; }

.guideTopArea__info {display: flex; flex-direction: column; justify-content: center; align-items: start; flex-grow: 1; align-self: stretch; background: #fff; color: #000; padding: 0 1em; line-height: 1.6; }
.guideTopArea__head {display: block; font-size: 1.6rem; font-weight: bold;}
.guideTopArea__text {display: block; font-size: 0.85rem;}

.guideTopArea__image {width: 43.56%;}
.guideTopArea__ss {text-align: center; }
.guideTopArea__ssImg {max-width: 100%; }

@media screen and (max-width: 767px) {
    .guideTopArea__image {width: 100%; max-width: none; opacity: .8; }
    .guideTopArea__inner {display: block; padding-top: 11.71875vw; }
    .guideTopArea__info {position: absolute; display: block; bottom: 0; left: 0; right: 0; padding-bottom: 0.2em; color: #fff; background: transparent; text-align: center; ;}
    .guideTopArea__head {font-size: 5vw}
    .guideTopArea__text {font-size: 3vw;}
}

.tableOfContents {background: #fff; border-bottom: 2px solid #ececec; text-align: center; }
.tableOfContents__list {display: inline-block; padding: 1.5rem 0 1em; text-align: left; }
.tableOfContents__item {display: inline-block; padding: 0 1em; margin-bottom: 0.5em; color: #262626; border-right: 2px solid #e6e6e6; text-decoration: none !important;  }
.tableOfContents__item:last-child {border-right: none; }

/* guideListLayer */
.guideListLayer__bg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(30,30,30); opacity: 0.9; z-index: 100;}
.guideListLayer__inner {position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 100; padding: 1%;}
.guideListLayer__cage {position: relative; background: #fff; max-width: 100%; max-height: 100%; width: 960px; padding: 20px; overflow: auto; }
.guideListLayer li {list-style: none; }
.guideList__h2 {margin-bottom: 1rem;}
.guideList__header {display: flex; justify-content: space-between; margin-bottom: 1rem;  border-bottom: 1px solid #ddd; }
.guideList_toggler {margin-right: 30px; cursor: pointer; color: #33c; font-size: 0.85rem; }
.guideList__list {margin: 0 0 .5rem 0; padding: 0; overflow: hidden; }
.guideList__itemFirstDir {float: left; display: inline-block; white-space: nowrap; margin-right: 1.5em; margin-bottom: 0.5em; cursor: pointer; border-bottom: 1px solid transparent; }
.guideList__itemFirstDir.open {border-bottom: 1px solid #f00; font-weight: bold;}
.guideList__secondDirList {padding: 1em; background: #eee; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset; }
.guideList__secondDirList.show {display: block; }
.guideList__itemSecondDir {float: left; display: inline-block; white-space: nowrap; margin-right: 2em; font-size: 0.85rem; }
.guideList__itemSecondDir a {text-decoration: none; outline: none; }

.guideList__itemFirstDirSp {float: none; display: block;}
.guideList__itemFirstDirSp.open .guideList__itemFirstDirSpBtn {font-weight: bold; box-shadow: 0 1px 2px rgba(0,0,0,.1);}
.guideList__itemFirstDirSpBtn {display: block; padding: 1em; cursor: pointer; border-bottom: 1px solid #ddd; }
.guideList__secondDirListSp {padding: 0; background :rgba(0,0,0,.05); }
.guideList__itemSecondDirSp {border-bottom: 1px solid #ddd; }
.guideList__itemSecondDirSp a {display: block; padding: 1rem 1rem 1rem 2rem; outline: none; text-decoration: none; }
.guideList__close {position: absolute; right: 5px; top: 5px; font-size: 2rem; width: 2rem; height: 2rem; padding: 0; background: none; border: none; line-height: 1rem; }

.guideListLayerBtn {position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; right: 20px; bottom: 85px; width: 50px; height: 50px;     background: #fff;background: linear-gradient(to bottom, rgb(160,160,160) 0%, rgb(140,140,140) 100%);border: 1px solid #fff;border-radius: 5px;box-shadow: 1px 1px 0 rgba(0,0,0,.15), -1px 1px 1px rgba(0,0,0,.05), 1px -1px 1px rgba(0,0,0,.05), -1px -1px 1px rgba(0,0,0,.02); opacity: 0.8; font-size: .8rem; line-height: 1.4; cursor: pointer; z-index: 99; color: #fff; }

@media screen and (max-width: 767px) {
    .guideListLayer__inner {align-items: flex-start; }
    .guideList__list {margin-bottom: 0; }
    .guideListLayer__cage {padding: 0; }
    .guideList__header {flex-direction: column; padding: 1rem; margin-bottom: 0; }
    .guideList__h2 {margin-bottom: 0; }
    .guideList_toggler {text-align: right; }
    .guideListLayer__sp {display: block; }
    .guideListLayer__pc {display: none; }
}

/* vue */
[v-cloak] {display: none; }
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
