@charset "UTF-8";
/* 目次
***************************************
01. ふわっと表示させる
02. toggleNav(絞り込みナビゲーション)
03. 記事用パーツ(Works / News)
04. localNav
05. pagination
06. 一覧へ戻るリンク
07. SNSシェアボタン
08. スクロールダウン
09. スクロールで横移動
10. 画像をきらっと光らせる
11. 横方向に流れ続ける無限スライドショー
12. 背景色が伸びてテキスト出現（左から右）
13. 見出しデザイン
*****************************************/
/****************************************
01. ふわっと表示させる
*****************************************/
.scroll {
    opacity: 0;
    transition: all 1s ease;
}
.scroll.show {
    opacity: 1;
    transform: none;
}
.scroll--lr {
    transform: translate(-100px, 0);
}
.scroll--rl {
    transform: translate(100px, 0);
}
.scroll--up {
    transform: translate(0, 100px);
}
.scroll--down {
    transform: translate(0, -100px);
}
.scroll--scaleUp {
    transform: scale(.5);
}
.scroll--scaleDown {
    transform: scale(1.5);
}
.scroll--rotateL {
    transform: rotate(180deg);
}
.scroll--rotateR {
    transform: rotate(-180deg);
}

/* その場で */
*[class^="fade"] {
    animation-fill-mode: forwards;
    opacity: 0;
}
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 2s;
}
@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 下から */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1.5s;
}
@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から */
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 2s;
}
@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */
.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 2s;
}
@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */
.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 2s;
}
@keyframes fadeRightAnime{
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.fade01 {animation-delay: 1s;}
.fade02 {animation-delay: 3s;}
.fade03 {animation-delay: 5s;}
.fade04 {animation-delay: 10s;}
.fade05 {animation-delay: 13s;}
.fade06 {animation-delay: 16s;}


/****************************************
02. toggleNav(絞り込みナビゲーション)
*****************************************/
.toggleNav {
    display: block;
    width: 100%;
    margin: 7rem 0 10rem;
    padding: 0 12%;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    position: relative;
    background-image: url(../img/bg-orange.jpg);
    background-position: bottom;
    background-size: cover;
}
.toggleNav:hover,
.toggleNav.toggleOpen {
    background-image: url(../img/bg-orange.jpg);
}
.toggleNav:hover {
    background-color: rgba(255,255,255,0.2);
    background-blend-mode: lighten;
}
.toggleNav.toggleOpen {
    background-color: rgba(255,255,255,0);
    background-position: bottom;
}
.toggleNav-toggleButton {
    width: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position:relative;
    margin: 0 auto;
    padding: 2.6rem 0;
    cursor: pointer;
}
.toggleNav-toggleButton:hover {
    color: #eb610e;
}
.toggleNav-toggleButton:focus {
    box-shadow: none;
}
.toggleButton-plus {
    position: relative;
    z-index: 1;
    width: 1.8rem;
    height: 1.8rem;
}
.toggleNav-toggleButton .toggleButton-plus {
    width: 10px;
    height: 10px;
    line-height: 50px;
    font-size: 18px;
    text-indent: 10px;
}
.toggleNav-toggleButton::before,
.toggleNav-toggleButton::after {
    content: '';
    position: absolute;
    right: 0;
    top: 35px;
    width: 16px;
    height: 3px;
    background-color: #fff;
}
.toggleNav-toggleButton::before {
    transform: rotate(90deg);
}
.toggleOpen .toggleNav-toggleButton::before {
    height: 0;
}
.toggleNav-toggleButton:hover::before,
.toggleNav-toggleButton:hover::after {
    background: #eb610e;
}
.toggleNav_button_title {
    font-size: 1.6rem;
}
.toggleNav:hover .toggleNav_button_title {
    font-weight: bold;
}
.toggleNav_wrapper {
    padding: 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.toggleNav_taxonomy_area {
    padding: 2rem 0;
    display: grid;
    grid-template-columns: 130px auto;
    grid-auto-rows: auto;
}
.toggleNav_taxonomy-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
}
.toggleNav_taxonomy_inner {
}
.toggleNav_taxonomy-listArea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

}
.toggleNav_taxonomy-listArea_li {
    font-size: 1.6rem;
    font-weight: bold;
    margin-right: 2rem;
    margin-bottom: 3rem;

}
.toggleNav_taxonomy-listArea_li_inner {
    padding: .8rem 1.4rem;
    border-radius: 100px;
    color: #fff;
}
.toggleNav_taxonomy-listArea_li_inner:hover,
.toggleNav_taxonomy-listArea_li_inner.current {
    background: #fff;
    color: #FA9812;
}
.toggle + .toggleNav_wrapper { display: none; }


/****************************************
03. 記事用パーツ(Works / News)
*****************************************/
.articleDetail-area {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 5rem 0 0;
    width: 100%;
}
.articleDetail_block {
    margin: 5rem 0;
    width: 100%;
    max-width: 1000px;
}
.newsDetail .articleDetail_block {
    max-width:900px;
}
.articleDetail_data {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem;
}
.articleDetail_data-serviceName,
.articleDetail_data-updateDate {
    font-size: 1.6rem;
    font-weight: bold;
    width: 40%;
    letter-spacing: .2rem;
}
.articleDetail_block .articleDetail_data-tagList {
    width: 59%;
    display: flex;
    justify-content: flex-end;
}
.articleDetail_block .articleDetail_data-tagItem {
    margin-left: 2rem;
    font-size: 1.1rem;
    padding: .8rem 1.2rem;
    border: solid 1px #E6E6E6;
    border-radius: 100px;
}
.articleDetail_block .articleDetail_data-tagItem a {
    display: block;
    color: var(--font-baseColor-black);
    padding-bottom: 0;
}
.articleDetail_block .articleDetail_data-tagItem a:hover {
    border-bottom: none;
}
section[class^="articleDetail-column"]:not(:last-child) {
    margin-bottom: 14rem;
}
section[class^="articleDetail-column"] p {
    font-size: 1.8rem;
    line-height: 2;
    margin-bottom: 3rem;
}
section[class^="articleDetail-column"] figure:not(:first-child) {
    margin-top: 5rem;
}
section[class^="articleDetail-column"] figure {
    text-align: center;
}
section[class^="articleDetail-column"] img {
    border-radius: .4rem;
    border: 1px solid #E3E3E3;
    width: 100%;
    margin-top: 2vh;
}
section[class^="articleDetail-column"] ul,
section[class^="articleDetail-column"] ol,
section[class^="articleDetail-column"] .dl-default {
    padding: 5rem 6rem;
    border: 3px solid #48486C;
}
section[class^="articleDetail-column"] li,
.data-text ul li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 2rem;
    text-indent: -1.6rem;
    font-size: 1.8rem;
}
.data-text ul li { margin-bottom: 0; }
section[class^="articleDetail-column"] ul li:last-child,
.data-text ul li:last-child {
    margin-bottom: 0;
}
section[class^="articleDetail-column"] ul li::before,
.data-text ul li::before {
    content: "・";
    color: #E0C4A1;
    font-weight: bold;
    margin-right: 1rem;
}
section[class^="articleDetail-column"] .dl-default dt {
    width: 100%;
    padding: 8px 0;
    color: var(--sub-color-bule);
    font-weight: bold;
}
section[class^="articleDetail-column"] .dl-default dd {
    width: 100%;
    margin-bottom: 2rem;
    padding: 0 0 2rem 0;
    border-bottom: solid 1px #D9D9D9;
}
section[class^="articleDetail-column"] .dl-default dd:last-child {
    padding: 0;
    border-bottom: none;
}
div[class^="articleDetail-"] a,
.articleDetail_group-content a,
.data-text a {
    color: #EB610E;
    padding-bottom: 3px;
}
.dl-default a,
.data-list a,
div[class^="articleDetail-"] a,
.articleDetail_group-content a {
    text-decoration: underline;
}
div[class^="articleDetail-"] a:hover,
.articleDetail_group-content a:hover,
.data-text a:hover {
    color: #EB610E;
    text-decoration: none;
}
div[class^="articleDetail-"] .text-signature { /* 署名 */
    margin: 8rem 0 0 !important;
    text-align: right;
}
.articleDetail-column {
    width: 100%;
}
.articleDetail-column_2 {
    display: flex;
    justify-content: space-between;
}
.articleDetail-column_2-textArea {
    width: calc(50% - 30px);
}
.articleDetail_group-subTitle {

}
[class^="articleDetail-sectionTitle-"] {
    margin: 0 auto 12rem;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.articleDetail-sectionTitle-story {
    background: url(../img/worksDetail-subtitle-story.svg) no-repeat;
    width: 204px;
    height: 76px;
}
.articleDetail-sectionTitle-pd {
    background: url(../img/worksDetail-subtitle-pd.svg) no-repeat;
    width: 236px;
    height: 76px;
}
.articleDetail_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.articleDetail_group_inner {
    width: 100%;
    margin-bottom: 6rem;
}
.articleDetail-column-pd .articleDetail_group_inner.group-pd { order: 1; }
.articleDetail-column-pd .articleDetail_group_inner.group-pk { order: 2; }
.articleDetail-column-pd .articleDetail_group_inner.group-freeitem { order: 3; }
.articleDetail-column-pd .articleDetail_group_inner.group-download { order: 4; }

.articleDetail_group-content {
    font-size: 1.6rem;
    line-height: 2.7rem;
    padding: 7rem;
}
.articleDetail_group-content_inner {
    width: 100%;
    text-align: center;
    display: block;
}
.articleDetail_group-content_inner img {
    margin-left: auto;
    margin-right: auto;
}
.articleDetail_group .articleDetail_group-content h4 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #48486C;
    margin: 7rem 0 4.6rem;
    display: block;
    padding-left: 1rem;
    border-left: .4rem solid #48486C;
}
.articleDetail_group .articleDetail_group-content h4:first-child {
    margin: 0 0 4.6rem;
}
.articleDetail_group .articleDetail_group-content h5 {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 4.6rem 0 3rem;
}
.articleDetail_group .articleDetail_group-content p {
    margin-bottom: 2.4rem;
}
.articleDetail_group .articleDetail_group-content h4 + p,
.articleDetail_group .articleDetail_group-content h5 + p {
    margin-top: 0;
}
.articleDetail_group-subTitle {
    font-family: zen-maru-gothic, sans-serif;
    text-align: center;
    padding: 2rem;
    border-top: 2px solid #48486C;
    border-bottom: 2px solid #48486C;
    color: #48486C;
    letter-spacing: .4rem;
    font-weight: 500;
}
h2.articleDetail_group-subTitle {
        font-size: 2rem;
}
h3.articleDetail_group-subTitle {
        font-size: 2.4rem;
}
[class^="articleDetail-column-"] {
    margin-top: 8rem;
}
.downloadItem_list {
    display: block;
    margin-top: 2rem;
}
.downloadItem_list a {
    display: inline-block;
    border-radius: 100px;
    font-size: 1.4rem;
    text-align: center;
    color: #fff !important;
    background: #48486C;
    padding: .8rem 2rem !important;
    vertical-align: middle;
    min-width: 100px;
    margin-right: 1rem;
}
.downloadItem_list a:hover {
    border-bottom: none !important;
    background: #EB610E;
    color: #fff !important;
}
.data-list {
    display: flex;
    padding: 2.4rem 0;
    border-top: solid 1px #D9D9D9;
}
.data-list:last-child {
    border-bottom: solid 1px #D9D9D9;
}
.data-title {
    width: 30%;
    font-weight: bold;
    font-size: #4E4E4E;
}
.data-title .dataTitle-memo {
    font-weight: normal;
    display: block;
}
.data-text {
    width: calc(100% - 35%);
    font-size: 1.8rem;
    margin-left: 5%;
}
.data-text.tag > a {
    margin-right: 14px;
}
.data-text.tag > a::after {
    content: ",";
    display: inline-block;
}
.data-text.tag > a:last-child::after {
    content: "";
}
.articleFooter {
    width: 100%;
    padding: 0 12%;
    margin-bottom: 10rem;
}
.articleFooter-inner {
    display: flex;
    margin: 0 auto;
    align-items: center;
    max-width: 900px;
}
.worksDetail .articleFooter-inner {
    max-width: 1000px;
}
.articleNav {
    text-align: center;
    font-weight: bold;
}
.articleNav a {
    color: #585858;
    display: flex;
    align-items: center;
    position: relative;
    line-height: 2.6rem;
}
.articleNav.prev {
    text-align: left;
    flex-grow: 1;
    flex-basis: calc(100% / 2);
    padding-left: 5rem;
}
.articleNav a [class^="icon-"] {
    display: block;
    width: 30px;
    height: 16px;
    position: absolute;
}
.icon-prev {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242.396%22%20height%3D%2215.792%22%20viewBox%3D%220%200%2042.396%2015.792%22%3E%3Cg%20transform%3D%22translate(-1413.104%20-2124.313)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20y1%3D%2213%22%20x2%3D%2218%22%20transform%3D%22translate(1414.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1432.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    left: -46px;
    background-size: contain;
    background-repeat: no-repeat;
}
.articleNav.next {
    text-align: right;
    padding-right: 5rem;
    flex-grow: 2;
    flex-basis: calc(100% / 2);
}
.articleNav.next a {
    flex-direction: row-reverse;
}
.icon-next {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2243.397%22%20height%3D%2215.586%22%20viewBox%3D%220%200%2043.397%2015.586%22%3E%3Cg%20transform%3D%22translate(-1413.5%20-2124.312)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x2%3D%2217.5%22%20y2%3D%2212.791%22%20transform%3D%22translate(1438%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1437.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    right: -46px;
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
}
.articleNav.index {
    flex-grow: 3;
    flex-basis: 90px;
    margin: 0 3rem;
}
.articleNav.index a {
    flex-direction: column;
    font-size: 1.3rem;
}
.articleNav.index:first-child,
.articleNav.index:last-child {
    max-width: 90px;
    position: absolute;
    left: calc(50% - 45px);
}
.indexIcon_inner {
    padding: 2.6rem 2.4rem 2.2rem 2.4rem;;
    border: 1px solid #585858;
    border-radius: 100px;
    margin-bottom: .8rem;
}
.indexIcon .indexIcon_inner i {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 30px;
}
.indexIcon .indexIcon_inner i span {
    display: block;
    width: 6px;
    height: 6px;
    background: #585858;
    border-radius: 2px;
    margin-right: 4px;
    margin-bottom: 5px;
}
.indexIcon .indexIcon_inner i span:nth-child(3n) {
    margin-right: 0;
}
.articleNav:hover a { color: #EB610E; }
.articleNav:hover a span { background: #fff; }
.articleNav.prev:hover i,
.articleNav.next:hover i { border-color: #EB610E; }
.articleNav.prev:hover i {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242.396%22%20height%3D%2215.792%22%20viewBox%3D%220%200%2042.396%2015.792%22%3E%3Cg%20transform%3D%22translate(-1413.104%20-2124.313)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20y1%3D%2213%22%20x2%3D%2218%22%20transform%3D%22translate(1414.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1432.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    width: 34px;
    left: -50px;
}
.articleNav.next:hover i {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2243.397%22%20height%3D%2215.586%22%20viewBox%3D%220%200%2043.397%2015.586%22%3E%3Cg%20transform%3D%22translate(-1413.5%20-2124.312)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x2%3D%2217.5%22%20y2%3D%2212.791%22%20transform%3D%22translate(1438%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1437.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    width: 34px;
    right: -50px;
}
.articleNav:hover .indexIcon_inner {
    border: 1px solid #EB610E;
    background: #EB610E;
}

/****************************************
04. localNav
*****************************************/
.localNav {
    display: block;
    width: auto;
    padding: 0;
    position: fixed;
    left: 2.8rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
}
.localNav ul {
    width: 10vw;
    display: flex;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
}
.localNav li {
    width: 10vw;
    display: block;
    font-family: zen-maru-gothic, sans-serif;
    opacity: .8;
}
.localNav li a {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 1.4rem 0;
    letter-spacing: .3rem;
    color: #313131;
}
.localNav li a::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #EB610E;
    position: relative;
    top: 13px;
    left: -1.2rem;
    border-radius: 20px;
    opacity: 0;
}
.localNav li.current a::before {
    background: #EB610E;
    opacity: 1;
}
.localNav li a:hover,
.localNav li.current a {
    opacity: 1;
    color: #EB610E;
    font-weight: bold;
}

/****************************************
05. pagination
*****************************************/
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}
.pagination {
    width: 100%;
    padding: 0 12vw;
    margin: 5rem 0 10rem;
}
.nav-links {
    width: 100%;
}
ul.page-numbers {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
ul.page-numbers li {
    margin-right: 1rem;
}
ul.page-numbers li .page-numbers {
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-size: 1.8rem;
    display: block;
    border-radius: 100px;
    text-align: center;
    padding: 1rem 2.3rem;
}
ul.page-numbers li .prev,
ul.page-numbers li .next {
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    padding: 1.6rem 1.6rem 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-position: calc(50% - 0px) calc(100% - 32px);
}
ul.page-numbers li .prev {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242.396%22%20height%3D%2215.792%22%20viewBox%3D%220%200%2042.396%2015.792%22%3E%3Cg%20transform%3D%22translate(-1413.104%20-2124.313)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20y1%3D%2213%22%20x2%3D%2218%22%20transform%3D%22translate(1414.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1432.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    margin-right: 2rem;
}
ul.page-numbers li .next {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2243.397%22%20height%3D%2215.586%22%20viewBox%3D%220%200%2043.397%2015.586%22%3E%3Cg%20transform%3D%22translate(-1413.5%20-2124.312)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x2%3D%2217.5%22%20y2%3D%2212.791%22%20transform%3D%22translate(1438%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1437.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    margin-left: 2rem;
}
ul.page-numbers li .page-numbers:hover,
ul.page-numbers li .current {
    background-color: #F46B00;
    color: #fff;
}
ul.page-numbers li .prev:hover,
ul.page-numbers li .next:hover {
    background-color: transparent;
}
ul.page-numbers li .prev:hover {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242.396%22%20height%3D%2215.792%22%20viewBox%3D%220%200%2042.396%2015.792%22%3E%3Cg%20transform%3D%22translate(-1413.104%20-2124.313)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20y1%3D%2213%22%20x2%3D%2218%22%20transform%3D%22translate(1414.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1432.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
ul.page-numbers li .next:hover {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2243.397%22%20height%3D%2215.586%22%20viewBox%3D%220%200%2043.397%2015.586%22%3E%3Cg%20transform%3D%22translate(-1413.5%20-2124.312)%22%3E%3Cline%20x2%3D%2240%22%20transform%3D%22translate(1414.5%202138.5)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x2%3D%2217.5%22%20y2%3D%2212.791%22%20transform%3D%22translate(1438%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2C7.768V0%22%20transform%3D%22translate(1437.5%202125.709)%22%20fill%3D%22none%22%20stroke%3D%22%23F46B00%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/****************************************
06. 一覧へ戻るリンク
*****************************************/
.nav-back-list {
    position: fixed;
    top: calc(100vh / 2 - 9vh);
    left: 3rem;
    display: block;
    width: 26px;
    height: 159px;
    z-index: 100;
}
.nav-back-list .indexIcon {
    display: block;
    width: 26px;
    height: 159px;
}
.nav-back-list .indexIcon .backToList {
    width: 26px;
    height: 159px;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22158.94%22%20viewBox%3D%220%200%2026%20158.94%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20width%3D%2226%22%20height%3D%2226%22%20fill%3D%22none%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate(10342%207895)%22%3E%3Cg%20transform%3D%22translate(-10374%20-9623)%22%3E%3Cg%20transform%3D%22translate(-908%20-1323)%22%3E%3Cg%20transform%3D%22translate(940%203051)%22%20clip-path%3D%22url(%23a)%22%3E%3Cg%20transform%3D%22translate(-598%20-4275)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-588%20-4275)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-578%20-4275)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-598%20-4265)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-588%20-4265)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-578%20-4265)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-598%20-4255)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-588%20-4255)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-578%20-4255)%22%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20rx%3D%222%22%20transform%3D%22translate(598%204275)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cpath%20d%3D%22M1.4%2C0H5.76c3.8%2C0%2C5.12-1.76%2C5.12-4.02A2.668%2C2.668%2C0%2C0%2C0%2C8.52-6.66a3.3%2C3.3%2C0%2C0%2C0%2C2.86-3.4c0-1.88-1.32-2.88-3.84-2.88H3.98a.963.963%2C0%2C0%2C0-1.04.88L.6-1.04C.46-.36.78%2C0%2C1.4%2C0Zm2-7.16.98-4.54H7.26c1.72%2C0%2C2.56.64%2C2.6%2C1.86%2C0%2C1.48-1.06%2C2.68-3.2%2C2.68ZM2.14-1.24l1.02-4.8h3.4c1.82%2C0%2C2.8.72%2C2.8%2C1.98%2C0%2C1.84-1.02%2C2.82-3.54%2C2.82ZM17.8.22a4.144%2C4.144%2C0%2C0%2C0%2C3.54-2.06%2C3.367%2C3.367%2C0%2C0%2C0-.02.76A1.256%2C1.256%2C0%2C0%2C0%2C22.7.16c.92%2C0%2C.92-.78.9-.78-.74-.06-1.04-.36-.8-1.44l1.56-7.36c.02-.06-.22-.2-.52-.2-.42%2C0-.68.22-.88.78a8.294%2C8.294%2C0%2C0%2C0-.38%2C1.24%2C3.478%2C3.478%2C0%2C0%2C0-3.36-2.16c-3.16%2C0-5.18%2C2.96-5.18%2C5.94A3.7%2C3.7%2C0%2C0%2C0%2C17.8.22ZM18.14-1A2.615%2C2.615%2C0%2C0%2C1%2C15.5-3.86c0-2.22%2C1.46-4.68%2C3.78-4.68a2.878%2C2.878%2C0%2C0%2C1%2C2.94%2C2.48l-.36%2C1.72A4.032%2C4.032%2C0%2C0%2C1%2C18.14-1ZM31.36.22a4.647%2C4.647%2C0%2C0%2C0%2C3.16-1.2%2C1.926%2C1.926%2C0%2C0%2C0%2C.66-1.18c0-.6-.78-.7-.82-.64a3.254%2C3.254%2C0%2C0%2C1-2.88%2C1.78A2.924%2C2.924%2C0%2C0%2C1%2C28.4-4.16c0-2.12%2C1.58-4.36%2C3.86-4.36A2.653%2C2.653%2C0%2C0%2C1%2C35.1-6.16a.835.835%2C0%2C0%2C0%2C1.08-.8%2C2.5%2C2.5%2C0%2C0%2C0-.82-1.66%2C4.251%2C4.251%2C0%2C0%2C0-3.12-1.14%2C5.511%2C5.511%2C0%2C0%2C0-5.28%2C5.64A4.118%2C4.118%2C0%2C0%2C0%2C31.36.22ZM47.02-9.1a.768.768%2C0%2C0%2C0-.72-.64L40.84-5.28l1.62-7.68c.1-.52-.22-.68-.58-.68h-.2c-.36%2C0-.56.18-.66.68L38.42-.66c-.12.56.22.72.58.72h.18c.36%2C0%2C.56-.18.68-.72l.88-4.18%2C2.08%2C3.12c1%2C1.54%2C1.36%2C1.88%2C2.14%2C1.88A.938.938%2C0%2C0%2C0%2C45.98-.92c-.8-.02-1.08-.12-1.86-1.34l-1.84-2.6L46.44-8.1A1.3%2C1.3%2C0%2C0%2C0%2C47.02-9.1ZM57.08.22a2.234%2C2.234%2C0%2C0%2C0%2C1.6-.54A.95.95%2C0%2C0%2C0%2C59-1c0-.36-.24-.58-.3-.56a1.677%2C1.677%2C0%2C0%2C1-1.26.58c-1.04%2C0-1.56-.64-1.22-2.24l1.1-5.1h2.4a.586.586%2C0%2C0%2C0%2C.54-.24%2C1.142%2C1.142%2C0%2C0%2C0%2C.2-.62c0-.24-.2-.36-.58-.36H57.6l.44-2.18c.02-.06-.24-.2-.54-.2-.58%2C0-.92.32-1.12%2C1.28l-.22%2C1.1h-1a.617.617%2C0%2C0%2C0-.54.2%2C1.266%2C1.266%2C0%2C0%2C0-.2.64c0%2C.24.2.38.56.38h.92L54.8-3.14C54.34-.94%2C55.3.22%2C57.08.22Zm9.6%2C0a5.466%2C5.466%2C0%2C0%2C0%2C5.28-5.66%2C4.171%2C4.171%2C0%2C0%2C0-4.32-4.32A5.44%2C5.44%2C0%2C0%2C0%2C62.36-4.1%2C4.159%2C4.159%2C0%2C0%2C0%2C66.68.22Zm.06-1.2a2.966%2C2.966%2C0%2C0%2C1-2.98-3.14c0-2.32%2C1.7-4.44%2C3.8-4.44a2.955%2C2.955%2C0%2C0%2C1%2C2.98%2C3.14C70.54-3.1%2C68.84-.98%2C66.74-.98ZM80.62%2C0h6.3c.3%2C0%2C.5-.04.6-.18a1.208%2C1.208%2C0%2C0%2C0%2C.26-.76c0-.28-.24-.44-.66-.44H81.44l2.3-10.88c.12-.48-.1-.74-.54-.74H83c-.42%2C0-.64.22-.74.68L79.84-.98C79.72-.34%2C79.98%2C0%2C80.62%2C0ZM94.26-11.62a.975.975%2C0%2C0%2C0%2C.98-1.06.743.743%2C0%2C0%2C0-.84-.78.959.959%2C0%2C0%2C0-1%2C1.02A.778.778%2C0%2C0%2C0%2C94.26-11.62ZM92.72.16c.94%2C0%2C.94-.78.92-.78-.8-.04-1.08-.36-.86-1.44l1.46-6.86c.12-.54-.22-.7-.58-.7h-.2c-.36%2C0-.56.18-.66.7L91.34-2.08C91.02-.64%2C91.54.16%2C92.72.16Zm7.66.06c2.34%2C0%2C3.7-1.18%2C3.7-2.88%2C0-1.54-1.38-2.12-2.76-2.62-1.28-.48-2.26-.86-2.26-1.78%2C0-.8.74-1.54%2C2.12-1.54a3.336%2C3.336%2C0%2C0%2C1%2C3%2C1.66c.06.08.7-.14.7-.74a1.461%2C1.461%2C0%2C0%2C0-.48-.96%2C4.481%2C4.481%2C0%2C0%2C0-3.16-1.12c-2.16%2C0-3.54%2C1.26-3.54%2C2.84%2C0%2C1.68%2C1.46%2C2.28%2C2.8%2C2.76%2C1.26.44%2C2.16.76%2C2.16%2C1.64%2C0%2C.94-.82%2C1.58-2.26%2C1.58a3.761%2C3.761%2C0%2C0%2C1-3.32-1.78.794.794%2C0%2C0%2C0-.66.76%2C1.463%2C1.463%2C0%2C0%2C0%2C.5.94A4.862%2C4.862%2C0%2C0%2C0%2C100.38.22Zm10.18%2C0a2.234%2C2.234%2C0%2C0%2C0%2C1.6-.54.95.95%2C0%2C0%2C0%2C.32-.68c0-.36-.24-.58-.3-.56a1.677%2C1.677%2C0%2C0%2C1-1.26.58c-1.04%2C0-1.56-.64-1.22-2.24l1.1-5.1h2.4a.586.586%2C0%2C0%2C0%2C.54-.24%2C1.142%2C1.142%2C0%2C0%2C0%2C.2-.62c0-.24-.2-.36-.58-.36h-2.28l.44-2.18c.02-.06-.24-.2-.54-.2-.58%2C0-.92.32-1.12%2C1.28l-.22%2C1.1h-1a.617.617%2C0%2C0%2C0-.54.2%2C1.266%2C1.266%2C0%2C0%2C0-.2.64c0%2C.24.2.38.56.38h.92l-1.1%2C5.18C107.82-.94%2C108.78.22%2C110.56.22Z%22%20transform%3D%22translate(-10335%20-7850)%20rotate(90)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
}
.nav-back-list:hover {
    opacity: .6;
}

/****************************************
07. SNSシェアボタン
*****************************************/
.nav-share {
    position: fixed;
    top: calc(100vh / 2 - 16vh);
    right: 3rem;
    display: block;
}
.nav-share .nav-share_title,
.nav-share .facebooklink span,
.nav-share .tweet span,
.nav-share .pocket span,
.nav-share .line span,
.nav-share .hatena span {
    display: inline-block;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}
.nav-share .facebooklink span,
.nav-share .tweet span,
.nav-share .pocket span,
.nav-share .line span,
.nav-share .hatena span {
    width: 0;
    padding: 0;
    margin: 0;
}
.nav-share_title {
    display: block;
    width: 42px;
    height: 58px;
    margin: 0 auto;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.859%22%20height%3D%2255.18%22%20viewBox%3D%220%200%2013.859%2055.18%22%3E%3Cpath%20d%3D%22M4.9.22c2.96%2C0%2C4.54-1.62%2C4.54-3.8%2C0-2.02-1.62-2.8-3.22-3.48-1.64-.68-2.8-1.18-2.8-2.58%2C0-1.28%2C1.12-2.24%2C2.82-2.24A3.625%2C3.625%2C0%2C0%2C1%2C9.8-9.78c.04.08.78-.16.78-.82a1.83%2C1.83%2C0%2C0%2C0-.64-1.3A5.006%2C5.006%2C0%2C0%2C0%2C6.3-13.16c-2.74%2C0-4.38%2C1.68-4.38%2C3.68%2C0%2C2.1%2C1.64%2C2.92%2C3.22%2C3.58%2C1.54.64%2C2.78%2C1.16%2C2.78%2C2.48%2C0%2C1.46-1.02%2C2.36-2.98%2C2.36a4%2C4%2C0%2C0%2C1-4-2.36c-.02-.08-.76.14-.76.8A2.159%2C2.159%2C0%2C0%2C0%2C.9-1.18%2C5.7%2C5.7%2C0%2C0%2C0%2C4.9.22ZM20.76.16c.92%2C0%2C.96-.82.92-.82-.52-.06-.84-.22-.84-.8a11.289%2C11.289%2C0%2C0%2C1%2C.48-2.18%2C13.658%2C13.658%2C0%2C0%2C0%2C.56-3.02%2C2.924%2C2.924%2C0%2C0%2C0-3.12-3.1A3.851%2C3.851%2C0%2C0%2C0%2C15.44-7.8l1.1-5.16c.1-.52-.22-.68-.58-.68h-.2c-.36%2C0-.56.18-.66.68L12.48-.64c-.1.54.22.7.6.7h.16c.38%2C0%2C.58-.18.68-.7l1.22-5.68c.8-1.36%2C1.72-2.16%2C3.16-2.16a1.946%2C1.946%2C0%2C0%2C1%2C2.1%2C2.14%2C11.5%2C11.5%2C0%2C0%2C1-.52%2C2.62%2C11.749%2C11.749%2C0%2C0%2C0-.48%2C2.44A1.3%2C1.3%2C0%2C0%2C0%2C20.76.16ZM28.8.22a4.144%2C4.144%2C0%2C0%2C0%2C3.54-2.06%2C3.367%2C3.367%2C0%2C0%2C0-.02.76A1.256%2C1.256%2C0%2C0%2C0%2C33.7.16c.92%2C0%2C.92-.78.9-.78-.74-.06-1.04-.36-.8-1.44l1.56-7.36c.02-.06-.22-.2-.52-.2-.42%2C0-.68.22-.88.78a8.294%2C8.294%2C0%2C0%2C0-.38%2C1.24%2C3.478%2C3.478%2C0%2C0%2C0-3.36-2.16c-3.16%2C0-5.18%2C2.96-5.18%2C5.94A3.7%2C3.7%2C0%2C0%2C0%2C28.8.22ZM29.14-1A2.615%2C2.615%2C0%2C0%2C1%2C26.5-3.86c0-2.22%2C1.46-4.68%2C3.78-4.68a2.878%2C2.878%2C0%2C0%2C1%2C2.94%2C2.48l-.36%2C1.72A4.032%2C4.032%2C0%2C0%2C1%2C29.14-1ZM38.28.06h.18c.34%2C0%2C.56-.18.66-.68l.74-3.5c.54-2.58%2C1.52-4.24%2C2.96-4.24a1.533%2C1.533%2C0%2C0%2C1%2C1.22.54.927.927%2C0%2C0%2C0%2C.62-.96c0-.56-.62-.98-1.42-.98-1.16%2C0-2.02.7-2.68%2C2.08a5.261%2C5.261%2C0%2C0%2C0%2C.12-.94c.06-.78-.3-1-.74-1a.5.5%2C0%2C0%2C0-.36.1l-1.9%2C8.9C37.58-.12%2C37.9.06%2C38.28.06ZM50.26.22A4.459%2C4.459%2C0%2C0%2C0%2C53.62-.96a1.229%2C1.229%2C0%2C0%2C0%2C.5-.92c0-.52-.64-.68-.72-.64A3.487%2C3.487%2C0%2C0%2C1%2C50.32-.96a2.55%2C2.55%2C0%2C0%2C1-2.8-2.74%2C4.136%2C4.136%2C0%2C0%2C1%2C.06-.7c.9.08%2C1.68.12%2C2.38.12%2C4.18%2C0%2C5.4-1.22%2C5.4-2.98%2C0-1.44-1.22-2.5-3.36-2.5a5.894%2C5.894%2C0%2C0%2C0-5.86%2C6.08C46.14-1.38%2C47.62.22%2C50.26.22ZM47.82-5.44a4.44%2C4.44%2C0%2C0%2C1%2C4.1-3.16c1.38%2C0%2C2.06.7%2C2.06%2C1.38%2C0%2C.98-.86%2C1.9-4.14%2C1.9A15.255%2C15.255%2C0%2C0%2C1%2C47.82-5.44Z%22%20transform%3D%22translate(0.22%20-0.18)%20rotate(90)%22%20fill%3D%22%2348486c%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 2rem;
}
.nav-share .share {
    width: 100%;
}
.nav-share .share li {
    padding-bottom: 2rem;
}
.nav-share .share li a {
    display: block;
    text-align: center;
    border: 1px solid #48486C;
    border-radius: 100px;
    width: 42px;
    height: 42px;
}
.nav-share .share li.facebooklink a {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022.35%2041.78%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke%3A%23231f20%3Bstroke-miterlimit%3A10%3Bstroke-width%3A1.35px%3Bfill%3Aurl(%23radial-gradient)%3B%7D%3C%2Fstyle%3E%3CradialGradient%20id%3D%22radial-gradient%22%20cx%3D%2219.01%22%20cy%3D%2222.93%22%20r%3D%2219.66%22%20gradientTransform%3D%22translate(-4.4%202.11)%20scale(0.82%200.82)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232e3035%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23222428%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%3Cpath%20id%3D%22f%22%20class%3D%22cls-1%22%20d%3D%22M14.3%2C41.11V22.67h6.2l.92-7.19H14.3V10.89c0-2.08.58-3.5%2C3.57-3.5h3.8V1A49.32%2C49.32%2C0%2C0%2C0%2C16.13.67C10.64.67%2C6.88%2C4%2C6.88%2C10.18v5.3H.67v7.19H6.88V41.11Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
    background-size: 30%;
    opacity: .6;
}
.nav-share .share li.tweet a {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4OS4yIDQ4aDcwLjZMMzA1LjYgMjI0LjIgNDg3IDQ2NEgzNDVMMjMzLjcgMzE4LjYgMTA2LjUgNDY0SDM1LjhMMjAwLjcgMjc1LjUgMjYuOCA0OEgxNzIuNEwyNzIuOSAxODAuOSAzODkuMiA0OHpNMzY0LjQgNDIxLjhoMzkuMUwxNTEuMSA4OGgtNDJMMzY0LjQgNDIxLjh6Ii8+PC9zdmc+') 50% 50% no-repeat;
    background-size: 59%;
    opacity: .6;
}
.nav-share .share li.line a {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCA0OCA0OCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBkPSJNMjUuMTIsNDQuNTIxYy0yLjExNCwxLjE2Mi0yLjAyNC0wLjU0OS0xLjkzMy0xLjA3NmMwLjA1NC0wLjMxNCwwLjMtMS43ODcsMC4zLTEuNzg3YzAuMDctMC41MzQsMC4xNDQtMS4zNi0wLjA2Ny0xLjg4NyBjLTAuMjM1LTAuNTgtMS4xNjYtMC44ODItMS44NS0xLjAyOUMxMS40OCwzNy40MTUsNC4wMTEsMzAuNCw0LjAxMSwyMi4wMjVjMC05LjM0Miw5LjQyLTE2Ljk0MywyMC45OTUtMTYuOTQzUzQ2LDEyLjY4Myw0NiwyMi4wMjUgQzQ2LDMyLjUxNywzNC44NzIsMzkuMTU5LDI1LjEyLDQ0LjUyMXogTTE4LjM2OSwyNS44NDVjMC0wLjU2LTAuNDU5LTEuMDE1LTEuMDIzLTEuMDE1aC0yLjg1NnYtNi42NzggYzAtMC41Ni0wLjQ1OS0xLjAxNS0xLjAyMy0xLjAxNWMtMC41NjUsMC0xLjAyMywwLjQ1NS0xLjAyMywxLjAxNXY3LjY5NGMwLDAuNTYxLDAuNDU5LDEuMDE2LDEuMDIzLDEuMDE2aDMuODc5IEMxNy45MSwyNi44NjMsMTguMzY5LDI2LjQwNiwxOC4zNjksMjUuODQ1eiBNMjEuMzU3LDE4LjE1MmMwLTAuNTYtMC40NTktMS4wMTUtMS4wMjMtMS4wMTVjLTAuNTY1LDAtMS4wMjMsMC40NTUtMS4wMjMsMS4wMTUgdjcuNjk0YzAsMC41NjEsMC40NTksMS4wMTYsMS4wMjMsMS4wMTZjMC41NjUsMCwxLjAyMy0wLjQ1NiwxLjAyMy0xLjAxNlYxOC4xNTJ6IE0zMC42OTcsMTguMTUyYzAtMC41Ni0wLjQ1OS0xLjAxNS0xLjAyMy0xLjAxNSBjLTAuNTY1LDAtMS4wMjUsMC40NTUtMS4wMjUsMS4wMTV2NC43NjFsLTMuOTc4LTUuMzY5Yy0wLjE5Mi0wLjI1NC0wLjQ5OS0wLjQwNi0wLjgxOC0wLjQwNmMtMC4xMSwwLTAuMjE5LDAuMDE2LTAuMzI1LDAuMDUyIGMtMC40MTksMC4xMzktMC43LDAuNTI2LTAuNywwLjk2M3Y3LjY5NGMwLDAuNTYxLDAuNDYsMS4wMTYsMS4wMjUsMS4wMTZjMC41NjYsMCwxLjAyNS0wLjQ1NiwxLjAyNS0xLjAxNnYtNC43NTlsMy45NzYsNS4zNjkgYzAuMTkyLDAuMjU0LDAuNDk4LDAuNDA2LDAuODE4LDAuNDA2YzAuMTA5LDAsMC4yMTktMC4wMTgsMC4zMjUtMC4wNTNjMC40Mi0wLjEzNywwLjctMC41MjQsMC43LTAuOTYzVjE4LjE1MnogTTM2Ljk3NSwyMC45ODQgaC0yLjg1NnYtMS44MTdoMi44NTZjMC41NjYsMCwxLjAyNS0wLjQ1NSwxLjAyNS0xLjAxNWMwLTAuNTYtMC40Ni0xLjAxNS0xLjAyNS0xLjAxNWgtMy44NzljLTAuNTY1LDAtMS4wMjMsMC40NTUtMS4wMjMsMS4wMTUgYzAsMC4wMDEsMCwwLjAwMSwwLDAuMDAzdjMuODQydjAuMDAxYzAsMCwwLDAsMCwwLjAwMXYzLjg0NWMwLDAuNTYxLDAuNDYsMS4wMTYsMS4wMjMsMS4wMTZoMy44NzkgYzAuNTY1LDAsMS4wMjUtMC40NTYsMS4wMjUtMS4wMTZjMC0wLjU2LTAuNDYtMS4wMTUtMS4wMjUtMS4wMTVoLTIuODU2di0xLjgxN2gyLjg1NmMwLjU2NiwwLDEuMDI1LTAuNDU1LDEuMDI1LTEuMDE1IGMwLTAuNTYxLTAuNDYtMS4wMTYtMS4wMjUtMS4wMTZWMjAuOTg0eiI+PC9wYXRoPjwvc3ZnPg==') 50% 50% no-repeat;
    background-size: 64%;
    background-position-y: 0.8rem;
    opacity: .5;
}
.nav-share .share li.pocket a {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2041.23%2036.23%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke%3A%23231f20%3Bstroke-miterlimit%3A10%3Bstroke-width%3A1.23px%3Bfill%3Aurl(%23radial-gradient)%3B%7D%3C%2Fstyle%3E%3CradialGradient%20id%3D%22radial-gradient%22%20cx%3D%2220.62%22%20cy%3D%2218.12%22%20r%3D%2218.79%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232e3035%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23222428%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M38.12.62h-35a2.5%2C2.5%2C0%2C0%2C0-2.5%2C2.5V16.87A18.76%2C18.76%2C0%2C0%2C0%2C19.37%2C35.62h2.5A18.77%2C18.77%2C0%2C0%2C0%2C40.62%2C16.87V3.12a2.51%2C2.51%2C0%2C0%2C0-2.5-2.5ZM32.38%2C14.88l-10%2C10a2.47%2C2.47%2C0%2C0%2C1-3.53%2C0l-10-10a2.5%2C2.5%2C0%2C0%2C1%2C3.53-3.53l8.24%2C8.23%2C8.23-8.23a2.5%2C2.5%2C0%2C0%2C1%2C3.53%2C3.53Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
    background-size: 50%;
    background-position-y: 1.3rem;
    opacity: .6;
}
.nav-share .share li.hatena a {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij4gICAgPHBhdGggZD0iTSA5IDQgQyA2LjI0IDQgNCA2LjI0IDQgOSBMIDQgNDEgQyA0IDQzLjc2IDYuMjQgNDYgOSA0NiBMIDQxIDQ2IEMgNDMuNzYgNDYgNDYgNDMuNzYgNDYgNDEgTCA0NiA5IEMgNDYgNi4yNCA0My43NiA0IDQxIDQgTCA5IDQgeiBNIDE0LjkzOTQ1MyAxNiBMIDIzLjQ3MDcwMyAxNiBDIDI2LjA3MDcwMyAxNiAyOC4xNjk5MjIgMTcuODkwNDY5IDI4LjE2OTkyMiAyMC4yMzA0NjkgQyAyOC4xNjk5MjIgMjIuMTMwNDY5IDI2Ljc1OTg0NCAyMy43MiAyNC44Mzk4NDQgMjQuMjUgQyAyNy4xOTk4NDQgMjQuNjUgMjkgMjYuNjU5ODQ0IDI5IDI5LjA4OTg0NCBDIDI5IDMxLjc5OTg0NCAyNi43NTA0NjkgMzQgMjMuOTgwNDY5IDM0IEwgMTQuOTM5NDUzIDM0IEwgMTQuOTM5NDUzIDE2IHogTSAzMC45Mzk0NTMgMTYgTCAzNSAxNiBMIDM1IDI4IEwgMzAuOTM5NDUzIDI4IEwgMzAuOTM5NDUzIDE2IHogTSAxOS4yMTA5MzggMTkuOTQ5MjE5IEwgMTkuMjEwOTM4IDIzLjU5OTYwOSBMIDIxLjYxOTE0MSAyMy41OTk2MDkgQyAyMi42NTkxNDEgMjMuNTk5NjA5IDIzLjUwOTc2NiAyMi43Nzk3NjYgMjMuNTA5NzY2IDIxLjc1OTc2NiBDIDIzLjUwOTc2NiAyMC44MTk3NjYgMjIuNzcwMzEyIDIwLjA0OTIxOSAyMS44MjAzMTIgMTkuOTQ5MjE5IEwgMTkuMjEwOTM4IDE5Ljk0OTIxOSB6IE0gMTkuMjEwOTM4IDI2LjgwMDc4MSBMIDE5LjIxMDkzOCAzMC44MTA1NDcgTCAyMi4yMTA5MzggMzAuODEwNTQ3IEMgMjMuMzUwOTM4IDMwLjgxMDU0NyAyNC4yNjk1MzEgMjkuOTEwNTQ3IDI0LjI2OTUzMSAyOC44MTA1NDcgQyAyNC4yNjk1MzEgMjcuNzAwNTQ3IDIzLjM1MDkzOCAyNi44MDA3ODEgMjIuMjEwOTM4IDI2LjgwMDc4MSBMIDE5LjIxMDkzOCAyNi44MDA3ODEgeiBNIDMyLjk3MDcwMyAzMCBDIDM0LjA5MDcwMyAzMCAzNSAzMC45IDM1IDMyIEMgMzUgMzMuMSAzNC4wOTA3MDMgMzQgMzIuOTcwNzAzIDM0IEMgMzEuODUwNzAzIDM0IDMwLjkzOTQ1MyAzMy4xIDMwLjkzOTQ1MyAzMiBDIDMwLjkzOTQ1MyAzMC45IDMxLjg1MDcwMyAzMCAzMi45NzA3MDMgMzAgeiI+PC9wYXRoPjwvc3ZnPg==') 50% 50% no-repeat;
    background-size: 56%;
    opacity: .5;
}
.nav-share .facebooklink .fa.fa-facebook:before,
.nav-share .tweet .fa.fa-twitter:before,
.nav-share .pocket .fab.fa-get-pocket:before {
    display: none;
}
.nav-share .share li a:hover,
.nav-share .share li a:hover i:before {
    opacity: 1 !important;
    background-color: #fff;
}

/****************************************
08. スクロールダウン
*****************************************/
/*スクロールダウン全体の場所*/
.scrolldown {
    position: fixed;
    right: 3rem;
    top: calc(50% - 100px);
    z-index: 99;
}
/*Scrollテキストの描写*/
.scrolldown span {
    /*描画位置*/
    position: relative;
    /*テキストの形状*/
    font-family: zen-maru-gothic, sans-serif;
    color: #BABABA;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 72px;
    right: 13px;
    /*丸の形状*/
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #DEDEDE;
    border: 1px solid #DEDEDE;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
    0% { top: 80px;}
    100% { top: 130px;}
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
    0% {opacity: 0}
    50% {opacity: 1;}
    80% {opacity: 0.9;}
    100% {opacity: 0;}
}
/* 線の描写 */
.scrolldown:after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 72px;
    right: 18px;
    /*線の形状*/
    width: 2px;
    height: 80px;
    background: #DEDEDE;
}
.home .scrolldown span {
    color: var(--main-color-fvOrange);
}
.home .scrolldown:before {
    background: var(--main-color-fvOrange);
    border: 1px solid var(--main-color-fvOrange);
}
.home .scrolldown:after {
    background: var(--main-color-fvOrange);
}
/****************************************
09. スクロールで横移動
*****************************************/
.side-scroll {
    padding-top: 6vh !important;
}
.service section.ourService {
    padding: 0;
}
.l-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 10vh !important;
}
.l-hero-wrapper {
    height: calc(50vh + 10vh);
    display: flex;
    flex-wrap: nowrap;
    will-change: auto;
    align-content: flex-start;
    align-items: flex-start;
}
.l-hero-panel {
    margin: 0 8vh 3vh 0;
    width: 42vh;
}
.l-hero-panel-01 {
    margin-left: 12vw;
}
.l-hero-panel__contents {
    display: block;
    width: 42vh;
    padding-top: 50vh;
    transform: scale(1);
    transition: .2s all;
    -webkit-box-shadow: 0.9rem 1.4rem 2rem rgb(0 0 0 / 18%);
    box-shadow: 0.9rem 1.4rem 2rem rgb(0 0 0 / 18%);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center 30%;
    border-radius: 20px;
    background-color: #F9F9F9;
    border: .4px solid #fff;
    opacity: 1;
}
.l-hero-panel__contents:hover {
    background-color: #fff;
    opacity: 1;
}
.l-hero-panel__contents::before {
    content: "";
    display: block;
    font: 8vh zen-maru-gothic, sans-serif;
    color: #fff;
    position: absolute;
    top: -1.6rem;
    left: 1.6rem;
    opacity: .8;
}
.l-hero-panel-00 {
    display: block;
    margin: 0 10rem 3vh 12vw;
    width: 25vh;
    height: 30vh;
    min-width: 316px;
    min-height: 360px;
    opacity: 1;
}
.l-hero-panel-00 .section_header {
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start !important;
    align-content: flex-start;
}
.l-hero-panel-00 .section_header,
.l-hero-panel-00 .section_header .section_leftArea,
.l-hero-panel-00 .section_header .text {
    width: 100%;
}
.l-hero-panel-00 .section_header .text p {
    font-size: 1.6rem;
    line-height: 1.8;
    font-weight: 600;
    color: var(--font-baseColor-black);
    font-family: inherit;
}
.l-hero-panel-00 .l-hero-panel__contents:hover {
    background-color: var(--body-bg-color);
}
.l-hero-panel__contents.vr::before {
    content: "01";
}
.l-hero-panel__contents.aws::before {
    content: "02";
}
.l-hero-panel__contents.software::before {
    content: "03";
}
.l-hero-panel__contents.design::before {
    content: "04";
}
.l-hero-panel__contents.product::before {
    content: "05";
}
.l-hero-panel__contents.insourcing::before {
    content: "06";
}
.l-hero-panel__contents:hover::before {
    color: #F9F9F9;
}
.l-hero-panel__contents.vr {
    background-image: url(../img/service_list-vr.png);
}
.l-hero-panel__contents.vr:hover {
}
.l-hero-panel__contents.aws {
    background-image: url(../img/service_list-aws.png);
}
.l-hero-panel__contents.aws:hover {
}
.l-hero-panel__contents.software {
    background-image: url(../img/service_list-software.png);
}
.l-hero-panel__contents.software:hover {
}
.l-hero-panel__contents.design {
    background-image: url(../img/service_list-design.png);
}
.l-hero-panel__contents.design:hover {
}
.l-hero-panel__contents.product {
    background-image: url(../img/service_list-product.png);
}
.l-hero-panel__contents.product:hover {
}
.l-hero-panel__contents.insourcing {
    background-image: url(../img/service_list-insourcing.png);
}
.l-hero-panel__contents.insourcing:hover {
}
.l-hero-panel__contents em {
    width: 106%;
    font: 500 2.6vh zen-maru-gothic, sans-serif;
    color: var(--sub-color-bule);
    position: absolute;
    bottom: 3.8vh;
    padding-left: 3vh;
    font-weight: bold;
    text-align: left;
    display: flex;
    align-items: center;
    transition: .3s;
}
.l-hero-panel__contents em::before {
    content: "";
    width: 5vh;
    height: 5vh;
    background-color: transparent;
    border: 1.6px solid var(--sub-color-bule);
    border-radius: 100px;
    position: absolute;
    right: 0;
    transition: .3s;
    overflow: hidden;
}
.l-hero-panel__contents em::after {
    content: "";
    width: 5vh;
    height: 1.1vh;
    background: url(../img/btn_arrow.svg) no-repeat;
    background-position: center right;
    background-size: cover;
    position: absolute;
    right: 1.4vh;
}
.l-hero-panel__contents:hover em::before {
    transform: scale(1);
    transition: .3s;
    background: rgb(233,96,95);
    background: linear-gradient(338deg, rgba(233,96,95,1) 0%, rgba(255,207,65,0.7273503151260504) 74%, rgba(253,200,45,1) 100%);
}
.l-hero-panel__contents:hover em::after {
    width: 2.4vh;
    transition: .4s;
}
.l-hero-panel__contents:hover em {
    color: #F46B00;
}
.l-hero-panel__contents_banner {
    display: inline-block;
    position: absolute;
    top: -0.1vh;
    right: 1.8vh;
    width: 15vh;
    padding: 1vh 0;
    background-color: #F46B00;
    -webkit-box-shadow: 0.2rem 0.2rem 0.4rem rgb(0 0 0 / 15%);
    box-shadow: 0.2rem 0.2rem 0.4rem rgb(0 0 0 / 15%);
}
.l-hero-panel__contents_banner_inner {
    display: block;
    padding: 1vh 1.4vh .6vh;
    width: 100%;
    background-color: #fff;
}
.l-hero-panel__contents_banner_inner img {
    width: 100%;
    height: auto;
}
.spikes {
    background: #F46B00;
}
.spikes::after {
    content: '';
    position: absolute;
    right: 0;
    left: -0%;
    top: 100%;
    z-index: 10;
    display: block;
    height: 15px;
    background-size: 15px 100%;
    background-image: linear-gradient(135deg, #F46B00 25%, transparent 25%), linear-gradient(225deg, #F46B00 25%, transparent 25%);
    background-position: 0 0;
}

/****************************************
10. 画像をきらっと光らせる
*****************************************/
.reflection {
    width: 100%;
    height: auto;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.reflection:after {
    content: "";
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 4s ease-in-out infinite;
}

@keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/****************************************
11. 横方向に流れ続ける無限スライドショー
*****************************************/
.slideshow-left {
    display: flex;
    animation: loop-slide-left 20s infinite linear 1s both;
}
@keyframes loop-slide-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.slideshow-right {
    display: flex;
    animation: loop-slide-right 20s infinite linear 1s both;
}
@keyframes loop-slide-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/****************************************
12. 背景色が伸びてテキスト出現（左から右）
*****************************************/
.bgextend {
    animation-name:bgextendAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
    position: relative;
    overflow: hidden;/*　はみ出た色要素を隠す　*/
    opacity:0;
}
@keyframes bgextendAnimeBase{
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
/*中の要素*/
.bgappear {
    animation-name:bgextendAnimeSecond;
    animation-duration:1s;
    animation-delay: 0.6s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes bgextendAnimeSecond{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*左から右*/
.bgLRextend::before{
    animation-name: bgLRextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--sub-color-bule);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
    0% {
        transform-origin:left;
        transform:scaleX(0);
    }
    50% {
        transform-origin:left;
        transform:scaleX(1);
    }
    50.001% {
        transform-origin:right;
    }
    100% {
        transform-origin:right;
        transform:scaleX(0);
    }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}
/****************************************
13. 見出しデザイン
*****************************************/
/* 両サイドに線 */
.line-bothSides {
    position: relative;
    padding: 0 65px;
    text-align: center;
    color: var(--sub-color-bule);
    font-family: zen-maru-gothic, sans-serif;
    font-size: 2rem;
    font-weight: 500;
}
.line-bothSides:before {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    background: #B8B8C2;
}
.line-bothSides span {
    position: relative;
    padding: 0 1rem;
    background: var(--body-bg-color);
}