/*
Theme Name:futurio child
Template: futurio
*/

/*-------------------------------------------------------------------
    基本設定・共通設定
-------------------------------------------------------------------*/
body {
    font-family: Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
    font-size: 16px;
}
a {
    text-decoration: none !important;
}
a:hover {
    text-decoration: underline;
    color: #00aff2;
}
p {
    margin: 0 0 10px;
    line-height: 2;
}

/*幅100%コンテンツの横スクロールバー防止*/
.wrap{ overflow: hidden; }

/************************** body内指定 **************************/
.main_wrapper {
    max-width: 1000px;
    font-size: 16px;
    margin: 0 auto;
}

.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media screen and (max-width: 1199px) {
    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

.page-area {
    padding-top: 0px;
}
.single-entry-summary{
    margin-top: 0px;
}


/************************* ヘッダーロゴ・幅 *************************/
/*ヘッダーエリア*/
.navbar {
    position: relative;
    margin-bottom: 0px !important;
}

/*ヘッダーロゴ*/
.site-branding-logo img {
    width: auto;
    max-height: 65px;
    -webkit-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
}
/*ナビゲーションメニュー*/
.dropdown-menu {
    min-width: 200px !important;
}
.dropdown-menu li a {
    white-space: pre-wrap !important;
}
#site-navigation,
#site-navigation .navbar-nav>li>a,
#site-navigation .dropdown-menu>li>a {
    text-transform: none !important;
}
@media (max-width: 767px) {
    #site-navigation .dropdown-menu > li > a{ padding: 8px 20px; }
    #site-navigation .navbar-nav{ margin: 7.5px 0; }
    #site-navigation .navbar-nav > li{ padding-bottom:16px; }
    /*「>」を削除*/
    #site-navigation .dropdown-menu > li > a:after{ content: ""; }

    #site-navigation .container{
        min-height: 50px;
        padding-top: 4px;
    }
    /*モバイル時の右上メニューアイコン 位置調整*/
    .open-panel span:nth-child(1),.open-panel.open span:nth-child(1){ top: 4px; }
    .open-panel span:nth-child(2){ top: 11px; }
    .open-panel span:nth-child(3){ top: 18px; }
    .open-panel.open span:nth-child(3){ top: 20px; }
}

/*スマホ時の[menu]非表示指定*/
.brand-absolute {
    display: none !important;
}

/****************** Futurio(親テーマ)のナビメニューCSSを補完(色) ******************/
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    color: #262626;
    background-color: #e7e7e7;
}
.dropdown-menu > li > a:hover{
    background-color: #e7e7e7;
}
.dropdown-menu > .active > a:hover{
    color: #262626;
    background-color: #e7e7e7;
}
/*孫がいるトップナビゲーションメニューも、子のみいるトップナビゲーションメニューと同じデザインにする*/
.navbar-default .navbar-nav > .current-menu-ancestor > a{
    background-color: #e7e7e7;
    color: #555;
}
.nav > li.current-menu-ancestor > a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00aff2;
}
@media (max-width: 767px) {
    .dropdown-menu > .current-menu-parent.active > a{
        color: #262626;
        background-color: #fff;
    }
}


/*********************** 固定ページ共通 ***********************/
/*ヘッダー画像*/
.full-head-img {
    background: url(img/head_img3.jpg);
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    color: #000 !important;
}
.full-head-img:after {
    background-color: rgba(0, 0, 0, 0.6);
}

/*ヘッダータイトル*/
.single-title {
    font-weight: 700;
    font-size: 35px;
}
@media screen and (max-width: 767px) {
    .single-title {
        font-size: 30px;
    }
}

/*********************** アーカイブ共通 ***********************/
.post__wrapper {
    display: flex;
}
@media screen and (max-width: 1199px) {
    .post__wrapper {
        display: block;
    }
}

.post_content {
    display: block;
    padding: 20px;
}

/*ページネーション*/
.pagination {
    text-align: center;
    padding-top: 20px;
    margin: 40px 0 20px;
}
.pagination .page-numbers {
    padding: 5px 10px;
    border: 1px solid #b5b5b5;
}
.pagination .page-numbers.current{
    background-color: #8BA2B2;
    color: #fff;
}

/************************** パンくず **************************/
.breadcrumb {
    font-size: 14px;
    margin-bottom: 40px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breadcrumb > span,.breadcrumb a {
    color: #333333;
}
.breadcrumb a:hover{
    color: #00aff2;
}

/*-------------------------------------------------------------------
    フロントページ
-------------------------------------------------------------------*/

/******************** ヘッダータイトルエリア・パンくず **************************/
.page-id-71 .head-bread {
    display: none !important;
}
.page-id-71 .full-head-img {
    display: none !important;
}

/*フロントページの見出し文字*/
@media screen and (max-width: 767px) {
    .service-item-title strong {
        font-size: 20px;
    }
    .section-head strong {
        font-size: 30px;
    }
}

/*********************** firstview *****************************/
/*画像エリア*/
.top {
    text-align: center;
    padding: 300px 30px;
    background: url(img/first-view.jpg)no-repeat center center;
    background-size: cover;
    margin: 0 calc(50% - 50vW);
    width: 100vw;
}
/*画像内タイトル*/
.top-title {
    font-size: 40px;
    line-height: 0.95em;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 0 0.2em rgba(0, 0, 0, 1);
}
.top-lead {
    font-size: 28px;
    margin: 20px 0px 0px !important;
}

@media screen and (max-width: 1199px) {
    .top {
        padding: 200px 20px;
    }
    .top-title {
        font-size: 30px;
    }
}
@media screen and (max-width: 767px) {
    .top {
        padding: 100px 20px;
    }
    .top-title {
        font-size: 20px;
    }
}

/******************** firstview お知らせエリア ********************/
.firstview_news{
    width: 80%;
    font-size: 18px;
    text-align: center;
    padding: 16px 8px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
}
.firstview_news .label{ font-size: 14px; }
.firstview_news .label.inlineblock + .inlineblock{
    padding: .2em .6em .3em;
}

@media screen and (max-width: 767px) {
    .firstview_news{
        width: 90%;
        font-size: 16px;
    }
}

/************************** 波動くやつ **************************/
.wave {
    position: relative;
    width: 100%;
    height: 200px;
}

@media screen and (max-width: 767px) {
    .wave {
        height: 150px;
    }
}
.wave canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 calc(50% - 50vW);
    width: 100vw;
}

/********************** ボタン-アニメーション *********************/
/*ボタンリンクをボタン全体指定*/
.link-button {
    background-color: #454545;
    border: 4px solid #058CCB;
}
.link-button a {
    color: #fff !important;
    font-weight: 800;
    display: block;
    padding: 1.0rem 2.0rem;
}
.link-button a:hover {
    color: #000 !important;
}
p.has-background {
    padding: 0px;
}

/*ボタンリンクhover時のアニメーション部分*/
.c-btn.circle {
    overflow: hidden;
    position: relative;
    transition-duration: .4s;
    z-index: 2;
}
.c-btn.circle::after {
    background: #E5FFFF;
    border-radius: 50%;
    content: "";
    display: block;
    margin: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding-top: 100%;
    height: 0;
    z-index: -1;
    transform: translateY(-50%) scale(0.1);
}
.c-btn.circle:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition-delay: 0s;
    transition: opacity .8s, transform .6s ease-in-out;
}

/************************** view more **************************/
.c-btn.practice {
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
}
.c-btn.practice:hover { letter-spacing: 0.15em; }

/************************** firstview下 **************************/
/*余白部分*/
@media screen and (max-width: 767px) {
    .firstview_spece {
        height: 60px !important;
    }
}

/*タイピング風に表示するエリア*/
#app {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    font-weight: bold;
    line-height: 1.5;
    font-family: "Times New Roman";
}

#typewriter {
    font-size: 24px;
}
@media screen and (max-width: 1199px) {
    #typewriter {
        font-size: 20px;
    }
}
@media screen and (max-width: 767px) {
    #typewriter {
        font-size: 18px;
    }
}

/************************** service **************************/
.service {
    color: #000;
    padding: 2rem 2.5rem;
    border-radius: 0.8rem;
    box-shadow: 7px 7px 4rem rgba(0 0 0 / 8%);
    transition-duration: .4s;
}
.service:hover {
    transform: scale(1.2);
}

/*.box {
    animation-fill-mode: forwards;
    border-radius: 20px;
    padding: 20px
}*/

@media screen and (max-width: 767px) {
    .service_spece {
        height: 20px !important;
    }
    .service-message {
        font-size: 16px !important;
    }
}

/****************** news/press/media共通 ******************/
.top-post__time {
    width: 30%;
}
.top-post__link {
    width: 70%;
}

/*プレスリリースとメディアの各記事枠  一覧ページでもクラス使用*/
.top_postarea{
    box-shadow: 4px 4px 3px #eee;
    border: 1px solid #ddd;
    padding: 2rem 1rem;
}
.top_post__item {
    margin-bottom: 14px;
    padding: 2rem 2.5rem 1rem;
    transition-duration: .4s;
}
.top_post__item a{
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding-bottom: 2px;
    border-bottom: 1px solid #eee;
}

@media screen and (max-width: 767px) {
    .top-post__time {
        width: 100%;
        padding-bottom: 6px;
    }
    .top-post__link {
        width: 100%;
    }
    /*プレスリリースとメディアの各記事枠*/
    .top_postarea {
        box-shadow: none;
        border: none;
    }
    .top_post__item {
        border-bottom: 1px solid #ccc;
    }
    .top_post__item a{ border: none; }

/*    プレスリリースとメディアの間のmarginを開ける*/
    .media-ttl {
        margin-top: 80px;
    }
}

/************************** news **************************/
/*ニュースの各記事枠*/
#news__item {
    color: #000;
    margin-bottom: 20px;
    display: flex;
    padding: 2rem 2.5rem;
    border-bottom: solid 1px rgba(0, 0, 0, 0.3);
    transition-duration: .4s;
}
@media screen and (max-width: 767px) {
    /*ニュースの各記事枠*/
    #news__item {
        display: block;
    }
}

/********************* company/recruit *********************/
.parallelogram_clm{}
.parallelogram_clm :not(.parallelogram){
    z-index: 2;
}
.parallelogram_clm .parallelogram{
    background-color: #00A0E9;
    transform: skewX(-40deg);
    overflow: hidden;
}
.parallelogram_clm .parallelogram img{
    transform: skewX(40deg);
}
@media screen and (max-width: 767px) {
    .parallelogram_clm .parallelogram,
    .parallelogram_clm .parallelogram img{
        transform: none;
    }
}

/************************** access **************************/
.access_wrapper {
    max-width: 1000px;
    margin: 0 auto;
}


/*-------------------------------------------------------------------
    サイドバー
-------------------------------------------------------------------*/

/*サイドバーエリア*/
.archive__wrapper {
    margin-left: 20px;
    width: 30%;
}
@media screen and (max-width: 1199px) {
    .archive__wrapper {
        margin-left: 0px;
        width: 100%;
        display: inline-block;
    }
}
/*サイドバータイトル*/
.archive_title {
    position: relative;
    display: inline-block;
    font-size: 18px;
    padding: 0 55px;
    text-align: center;
}
.archive_title:before,
.archive_title:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: black;
}
.archive_title:before {
    left: 0;
}
.archive_title:after {
    right: 0;
}

/*サイドバー カテゴリ一覧*/
.category_list li {
    list-style: none;
    border-bottom: groove 2px #ddd;
    margin-bottom: 10px;
}
.category_list li a {
    color: #000;
    display: block;
    padding: 10px;
    font-size: 16px;
}
.category_list li a:hover {
    background: #dbedf0;
}


/*-------------------------------------------------------------------
    フッター
-------------------------------------------------------------------*/

footer .container{ width: 100%; }

/************************ フッターSEO文言エリア ************************/

/*アニメーション:footeranime*/
@keyframes footeranime {
    from {
        background-position: 0 100%;
    }
    to {
        background-position: 0 0;
    }
}

.footer-credits { background-color: #fff; }

/*#colophon .container { width: 100%; }*/

.footer-credits-text {
    color: #000;
    background-color: #fff;
    padding: 20px 0 40px;
}
/*PCの時内部にfloatを持つため、高さがなくなるのを防ぐ*/
.footer_container{ overflow:hidden; }

/*フッターSEO  カスタマイズ＞Copyright内にHTML*/
.footer-seo-area {
    background:url(img/footerimg.jpg) center top repeat-x;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode:lighten;
    animation: footeranime 20s linear infinite alternate;
}
.seo_message {
    padding: 200px 30px 50px;
    line-height: 2.0;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 15px;
    text-align: left;
}

/*.footer_row {
    margin-top: 80px;
}
*/
/*フッター大文字*/
/*.footer_big {
    font-size: 22px !important;
}*/
/*フッターmenu*/
/*.footer_menu {
    font-size: 14px;
    text-align: left;
}*/
/*.footer_menu a {*/
/*    color: #000;*/
    /* 線の色 */
/*    background-image: linear-gradient(90deg, #0086e0, #0086e0);*/
/*    background-repeat: no-repeat;*/
    /* 線の起点を左・下に設定 */
/*    background-position: left bottom;*/
    /* 線の横幅を0、縦幅を1pxに */
/*    background-size: 0 1px;*/
    /* 線を伸ばすアニメーション実行時間を指定 */
/*    transition: background-size 0.6s;*/
/*}*/
/*.footer_menu a:hover {*/
    /* 線の横幅を100%にする */
/*    background-size: 100% 1px;*/
/*}*/
@media screen and (max-width: 991px) {
    .footer_menu {
        text-align: center;
    }
}

.widget ul li {
    border-bottom: none;
}

#content-footer-section{
    color: #000;
    background-color: #fff;
    padding: 30px 0;
}

.widget_nav_menu a{
    font-size: 18px;
    color: #000;
    margin-bottom: 4px;
    /* 線の色 */
    background-image: linear-gradient(90deg, #0086e0, #0086e0);
    background-repeat: no-repeat;
    /* 線の起点を左・下に設定 */
    background-position: left bottom;
    /* 線の横幅を0、縦幅を1pxに */
    background-size: 0 1px;
    /* 線を伸ばすアニメーション実行時間を指定 */
    transition: background-size 0.6s;
}
.widget_nav_menu a:hover {
    /* 線の横幅を100%にする */
    background-size: 100% 1px;
}
.widget_nav_menu .sub-menu{
    margin-top: 10px;
}
.widget_nav_menu .sub-menu a{
    font-size: 15px;
}

.widget_nav_menu .menu-item-has-children > a:after{
    content: "";
    margin-left: 0;
}

/*コピーライトエリアだけウィジェットを１カラムにする*/
#content-footer-section .widget_block:has(.site-footer-copyright){
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}
/*コピーライト文*/
.site-footer-copyright {
    width: 100%;
    font-size: 14px;
    margin: 20px 0 0;
}

@media screen and (max-width: 991px) {
    #content-footer-section .widget {
        text-align: center;
    }
    .widget_nav_menu .sub-menu{
        padding-left: 0;
    }
}

/*-------------------------------------------------------------------
    archive.php
-------------------------------------------------------------------*/

/********************* news/press/technology **********************/
/*記事一覧表示エリア*/
.post__item{
    color: #000;
    margin-bottom: 20px;
    display: flex;
    padding: 2rem 2.5rem;
    border-radius: 0.8rem;
    box-shadow: 7px 7px 4rem rgba(0 0 0 / 8%);
    transition-duration: .4s;
}
.post__item:hover {
    background: #dbedf0;
    color: #333;
}

.post__inner {
    width: 70%;
    margin-bottom: 10rem;
    overflow: hidden;
}
@media screen and (max-width: 1199px) {
    .post__inner {
        width: 100%;
    }
}

/*各ニュース記事枠*/
.news-item {
    display: block;
    margin-bottom: 10px;
}
.news-text-wrap {
    width: 100%;
}
/*アイキャッチの非表示*/
.news-thumb {
    display: none;
}

@media screen and (max-width: 767px) {
    .post__item {
        display: block;
    }
    .post__inner {
        width: 100%;
    }
}

/*-------------------------------------------------------------------
    single.php
-------------------------------------------------------------------*/

/*投稿記事エリア*/
.blog-content {
    max-width: 840px;
    font-size: 16px;
    margin: 0 auto;
}
.blog-content h2 {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
}

/* 公開日 */
.date_list p {
    font-size: 14px;
    color: #494949;
    margin-bottom: 16px;
}

/*リンク前にリンクアイコンを付けるときに利用する汎用クラス*/
.topic_servicelink:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f35d";
    padding-right: 0.5rem;
    color: #019FE8;
}

/*カテゴリー名表示エリア*/
.cat_names {
    display: block;
    font-size: 16px;
    max-width: 840px;
    margin: 20px auto;
    padding: 0px;
}
.cat_names:before {
    /*「カテゴリー」をUnicodeに変換*/
    content: "\30AB\30C6\30B4\30EA\30FC";
    background-color: #666;
    color: #fff;
    font-size: 10px;
    padding: 10px 8px 8px;
    font-weight: lighter;
    margin-right: 10px;
    border: none;
    text-align: center;
    display: inline-block;
    border-radius: 3px;
}
.cat_names li {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
}
.cat_names li:after{
    content: "/";
    padding-left: 10px;
}
.cat_names li:last-child:after{
    content: none;
}
.cat_names a {
    color: #333333;
}
.cat_names a:hover {
    color: #00aff2;
}
@media screen and (max-width: 767px) {
    .cat_names a {
        font-size: 14px;
    }
}

/*前後の記事リンクエリア*/
.postLinks {
    display: flex;
    font-size: 18px;
    text-align: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    margin: 40px 0;
}
.postLink {
    width: 50%;
}
.postLink a {
    color: #333333;
}
.postLink a:hover {
    color: #00aff2;
}
.postLink-prev {
    margin-right: 20px;
}
.postLink.postLink-next{
    border-left: 1px solid #ddd;
}
/*＜アイコン*/
.fa-chevron-left {
    margin-right: 20px;
}
/*＞アイコン*/
.fa-chevron-right {
    padding-left: 20px;
}
@media screen and (max-width: 767px) {
    .postLink {
        font-size: 14px;
    }
}

/************************** 関連記事 **************************/
.related-post_title {
    text-align: center;
    font-weight: bold;
    margin: 80px 0px;
    position: relative;
    display: block;
    margin-bottom: 1em;
}
.related-post_title:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 50px;
    height: 2px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: black;
    border-radius: 2px;
}
/*関連記事一覧エリア*/
.related-posts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding-left: 0px;
    text-align: center;
}
.related-post {
    color: #000;
    margin-bottom: 20px;
    padding: 2rem 2.5rem;
    border-radius: 0.8rem;
    box-shadow: 7px 7px 4rem rgba(0 0 0 / 8%);
    transition-duration: .4s;
}
.related-post:hover {
    background: #dbedf0;
    color: #333;
}

/*関連記事タイトル*/
.article_title {
    font-size:16px;
    margin-top: 20px;
}
/*関連記事投稿日*/
.article_time {
    font-size:14px;
}

@media screen and (max-width:767px) {
    .related-posts {
        grid-template-columns: 1fr;
    }
}

/*-------------------------------------------------------------------
    404ページ
-------------------------------------------------------------------*/
.error-message {
    color: #013893;
    font-weight: 900;
}
@media screen and (max-width: 767px) {
    .error-message2 {
        font-size: 24px;
    }
    .error-details {
        line-height: 1.2;
    }
}

/*-------------------------------------------------------------------
    各固定ページ
-------------------------------------------------------------------*/
/************************** 会社案内 **************************/
.presidentmsg{
    position: relative;
    margin: 0 16px;
}
.presidentmsg .mgshead{
    position: absolute;
    top: 5%;
    left: 0;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 8px 3px #ddd;
    width: 44%;
    z-index: 2;
}
.presidentmsg .presidentname {
    font-size: 14px;
}
.presidentmsg figure{
    width: 100%;
    text-align: right;
}
.presidentmsg figure img{
    width: 80%;
    max-width: 800px;
    margin-top: 100px;
}
@media screen and (max-width: 767px) {
    .presidentmsg{ margin: 0; }
    .presidentmsg .mgshead{
        top: 0;
        width: 58%;
    }
    .presidentmsg .mgshead h2{ font-size: 22px; margin-bottom: 0; }
    .presidentmsg figure img{ width: 90%; }
    .presidentmsg .presidentname { font-size: 13px; }
}

/************************** 会社概要 **************************/
/*会社概要テーブル*/
.hands-table-style-regular table {
    font-size: 1.6rem;
}
.hands-table-style-regular table td:first-child {
    width: 26%;
    font-weight: 900;
    border-bottom-width: 2px;
    border-bottom-color: #AFC5D3;
}
.hands-table-style-regular table td,
.hands-table-style-regular table th {
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid #D1DDE5;
    padding: 1.5rem 1rem;
}
@media screen and (max-width: 767px) {
    .hands-table-style-regular table {
        font-size: 1.5rem;
    }
}

/************************** 沿革 **************************/
/*2000*/
.history_headerimg_area01 {
    padding: 10px 5px;
    background-color: #ef6252;
}
/*2003*/
.history_headerimg_area02 {
    padding: 10px 5px;
    background-color: #f3ac2b;
}
/*2010*/
.history_headerimg_area03 {
    padding: 10px 5px;
    background-color: #1a5882;
}
/*2014*/
.history_headerimg_area04 {
    padding: 10px 5px;
    background-color: #06b3f9;
}
/*2020*/
.history_headerimg_area05 {
    padding: 10px 5px;
    background-color: #88c43b;
}

/*********************** ビジネスモデル特許 ***********************/
.slide_animation_well {
    width:100%;
}

.slide_animation_box {
    margin-bottom: 14px;
    overflow: hidden;
    width: 100%;
    position: relative;
    padding-top: 66.66%;
}
.slide_animation_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}
.image {
    display: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: change-img-anim 10s infinite;
}
.image:nth-of-type(1) {
    animation-delay: 0s;
}
.image:nth-of-type(2) {
    animation-delay: 5s;
}

/*アニメーション:change-img-anim*/
@keyframes change-img-anim {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/************************** 事業概要 **************************/
.servicelistlink figure{
    background-color: #ECF3FD;
    padding: 20px;
}
.servicelistlink figure img{
    background-color: #FFF;
}
.servicelistlink p{ margin-top: 8px; }

@media screen and (max-width: 767px) {
    .servicelistlink figure{ padding: 8px; }
    :where(.wp-block-columns.is-layout-flex){ gap: 0.5em; }
    .servicelistlink p{ font-size: 13px; }
}


/************************** 求人情報 **************************/
/*求人内メニューリスト*/
.job_menu ul{
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.job_menu ul li {
    padding: 10px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/*子メニューは字下げする*/
.underlayer a {
    padding-left: 20px;
}

/************************ インターンシップ ************************/
/*スケジュール日付*/
.internship_summary_date {
    background-color: #f9e6b6;
    padding: 4px;
}

/*スケジュール詳細*/
.schedule_title {
    padding: 10px 6px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .05em;
    background-color: #337ab7;
    border-radius: 20px;
    margin-bottom: 2em;
}
.time-schedule {
    font-size: 1.6rem;
    list-style: none;
    margin: 0 auto 0 6em;
    padding-left: 12px;
    border-left: 6px solid #a7be18;
}
.time-schedule span.time {
    width: 5em;
    display: inline-block;
    margin-left: -8em;
    padding: 0 0 5px;
    margin-top: 15px;
    vertical-align: top;
    position: relative;
    font-weight: 900;
    text-align: right;
    box-sizing: border-box;
}

.time-schedule span.time::after {
    content: "";
    position: absolute;
    top: 0;
    left: 117%;
    background: #a7be18;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
.time-schedule li {
    margin:0 10px;
}

@media screen and (max-width: 767px) {
    .time-schedule {
        margin: 0 auto 0 4em;
    }
}

/************************** 会社説明会 **************************/
.youtube_wrapper iframe {
    width: 500px !important;
    height: 281px !important;
}

.html5-video-player {
    width: 500px !important;
    height: 281px !important;
}

/********************** お問い合わせ完了ページ **********************/
/* 見出し */
.thanksform_coments_title {
    border-bottom: solid 1px #013893;
}

/* トップへ戻るボタン */
.back_home_link a {
    display: inline-block;
    padding: 7px 15px;
    background-color: #013893;
    color: #fff;
    border-radius: 3px;
}

/************************* e-shopsクレヨン *************************/
.crayon-txt-wrapper {
    line-height: 1.5;
}
.crayon-list-wrapper {
    background: #f5f5f5;
    padding: 60px;
}
.crayon-list1 {
    margin-bottom: 40px;
}
.crayon-list2 {
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .crayon-list-wrapper {
        padding: 20px;
    }
}

/*************************** その他 ***************************/
.inquiry_btn a{
    color: #ffffff;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 40%);
}
.inquiry_btn a:hover{
    color: #ffffff;
    box-shadow: inset 1px 1px 5px rgb(0 0 0 / 24%);
    transition: box-shadow 0.2s;
}

/*-------------------------------------------------------------------
    装飾パターンクラス
-------------------------------------------------------------------*/

/****************** 見出し・下線(テキスト分の長さ) ******************/
/* 青 */
.line-bottom_blue {
    border-bottom: solid 3px #013893;
    padding-bottom: 10px;
}
/* 水色 */
.line-bottom_light-blue {
    border-bottom: solid 3px #0693e3;
    padding-bottom: 10px;
}
/* 黄色 */
.line-bottom_yellow {
    border-bottom: solid 3px #f8eb65;
    padding-bottom: 10px;
}
/* 黒 */
.line-bottom_black {
    border-bottom: solid 3px #000;
    padding-bottom: 10px;
}
/* 灰 */
.line-bottom_gray {
    border-bottom: solid 3px #aaa;
    padding-bottom: 10px;
}

/********************* 見出し・下線(短い線) *********************/
/* 青 */
.s-line-bottom_blue {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}
.s-line-bottom_blue:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #013893;
    border-radius: 2px;
}

/* 水色 */
.s-line-bottom_light-blue {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}
.s-line-bottom_light-blue:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #0693e3;
    border-radius: 2px;
}

/* 黄色 */
.s-line-bottom_yellow {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}
.s-line-bottom_yellow:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #f8eb65;
    border-radius: 2px;
}

/* 黒 */
.s-line-bottom_black {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}
.s-line-bottom_black:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #000;
    border-radius: 2px;
}

/*********************** 見出し・二重線 ***********************/
/* 青 */
.doubleline-bottom_blue {
    /*線の種類（二重線）太さ 色*/
    border-bottom: double 5px #013893;
}
/* 水色 */
.doubleline-bottom_light-blue {
    /*線の種類（二重線）太さ 色*/
    border-bottom: double 5px #0693e3;
}
/* 黄色 */
.doubleline-bottom_yellow {
    /*線の種類（二重線）太さ 色*/
    border-bottom: double 5px #f8eb65;
}
/* 黒 */
.doubleline-bottom_black {
    /*線の種類（二重線）太さ 色*/
    border-bottom: double 5px #000;
}

/*********************** 見出し・上下線 ***********************/
/* 青 */
.updown-line_blue {
    /*上下の余白*/
    padding: 0.5em 0;
    border-top: solid 3px #013893;
    border-bottom: solid 3px #013893;
}
/* 水色 */
.updown-line_light-blue {
    /*上下の余白*/
    padding: 0.5em 0;
    border-top: solid 3px #0693e3;
    border-bottom: solid 3px #0693e3;
}
/* 黄色 */
.updown-line_yellow {
    /*上下の余白*/
    padding: 0.5em 0;
    border-top: solid 3px #f8eb65;
    border-bottom: solid 3px #f8eb65;
}
/* 黒 */
.updown-line_black {
    /*上下の余白*/
    padding: 0.5em 0;
    border-top: solid 3px #000;
    border-bottom: solid 3px #000;
}

/*********************** 見出し・左線 ***********************/
/* 青 */
.left-line_blue {
    /*上下 左右の余白*/
    padding: 0.25em 0.5em;
    /*背景透明に*/
    background: transparent;
    border-left: solid 5px #013893;
}
/* 水色 */
.left-line_light-blue {
    /*上下 左右の余白*/
    padding: 0.25em 0.5em;
    /*背景透明に*/
    background: transparent;
    border-left: solid 5px #0693e3;
}
/* 黄色 */
.left-line_yellow {
    /*上下 左右の余白*/
    padding: 0.25em 0.5em;
    /*背景透明に*/
    background: transparent;
    border-left: solid 5px #f8eb65;
}
/* 黒 */
.left-line_black {
    /*上下 左右の余白*/
    padding: 0.25em 0.5em;
    /*背景透明に*/
    background: transparent;
    border-left: solid 5px #000;
}

/******************* 見出し・立体感のあるバー *******************/
/* 青 */
.solidbody_blue {
    /*文字の上下 左右の余白*/
    padding: 0.4em 0.5em;
    background: #f4f4f4;
    border-left: solid 5px #013893;
    border-bottom: solid 3px #d7d7d7;
}
/* 水色 */
.solidbody_light-blue {
    /*文字の上下 左右の余白*/
    padding: 0.4em 0.5em;
    background: #f4f4f4;
    border-left: solid 5px #0693e3;
    border-bottom: solid 3px #d7d7d7;
}
/* 黄色 */
.solidbody_yellow {
    /*文字の上下 左右の余白*/
    padding: 0.4em 0.5em;
    background: #f4f4f4;
    border-left: solid 5px #f8eb65;
    border-bottom: solid 3px #d7d7d7;
}
/* 黒 */
.solidbody_black {
    /*文字の上下 左右の余白*/
    padding: 0.4em 0.5em;
    background: #f4f4f4;
    border-left: solid 5px #000;
    border-bottom: solid 3px #d7d7d7;
}

/*********************** 見出し・タグ風 ***********************/
/* 青 */
.tag_blue {
    color: #fff;
    /*文字周りの余白*/
    padding: 0.5em;
    display: inline-block;
    line-height: 1.3;
    background: #013893;
    vertical-align: middle;
    /*左側の角を丸く*/
    border-radius: 25px 0px 0px 25px;
}
.tag_blue:before {
    content: '●';
    color: #fff;
    margin-right: 8px;
}

/* 水色 */
.tag_light-blue {
    color: #fff;
    /*文字周りの余白*/
    padding: 0.5em;
    display: inline-block;
    line-height: 1.3;
    background: #0693e3;
    vertical-align: middle;
    /*左側の角を丸く*/
    border-radius: 25px 0px 0px 25px;
}
.tag_light-blue:before {
    content: '●';
    color: #fff;
    margin-right: 8px;
}

/* 黄色 */
.tag_yellow {
    color: #000;
    /*文字周りの余白*/
    padding: 0.5em;
    display: inline-block;
    line-height: 1.3;
    background: #f8eb65;
    vertical-align: middle;
    /*左側の角を丸く*/
    border-radius: 25px 0px 0px 25px;
}
.tag_yellow:before {
    content: '●';
    color: #fff;
    margin-right: 8px;
}

/* 黒 */
.tag_black {
    color: #fff;
    /*文字周りの余白*/
    padding: 0.5em;
    display: inline-block;
    line-height: 1.3;
    background: black;
    vertical-align: middle;
    /*左側の角を丸く*/
    border-radius: 25px 0px 0px 25px;
}
.tag_black:before {
    content: '●';
    color: #fff;
    margin-right: 8px;
}

/********************** 見出し・吹き出し **********************/
/* 青 */
.balloon_blue {
    position: relative;
    padding: 0.6em;
    background: #013893;
    color: #fff;
}
.balloon_blue:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #013893;
    width: 0;
    height: 0;
}

/* 水色 */
.balloon_light-blue {
    position: relative;
    padding: 0.6em;
    background: #0693e3;
    color: #fff;
}
.balloon_light-blue:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #0693e3;
    width: 0;
    height: 0;
}

/* 黄色 */
.balloon_yellow {
    position: relative;
    padding: 0.6em;
    background: #f8eb65;
    color: #000;
}
.balloon_yellow:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #f8eb65;
    width: 0;
    height: 0;
}

/* 黒 */
.balloon_black {
    position: relative;
    padding: 0.6em;
    background: #000;
    color: #fff;
}
.balloon_black:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    width: 0;
    height: 0;
}

/******************* 見出し・ステッチ風（ステッチ→白） *******************/
/* 青 */
.stitch_blue {
    background: #013893;
    box-shadow: 0px 0px 0px 5px #013893;
    border: dashed 2px #fff;
    padding: 8px 10px;
    color: #fff;
}
/* 水色 */
.stitch_light-blue {
    background: #0693e3;
    box-shadow: 0px 0px 0px 5px #0693e3;
    border: dashed 2px #fff;
    padding: 8px 10px;
    color: #fff;
}
/* 黄色 */
.stitch_yellow {
    background: #f8eb65;
    box-shadow: 0px 0px 0px 5px #f8eb65;
    border: dashed 2px #fff;
    padding: 8px 10px;
    color: #000;
}
/* 黒 */
.stitch_black {
    background: #000;
    box-shadow: 0px 0px 0px 5px #000;
    border: dashed 2px #fff;
    padding: 8px 10px;
    color: #fff;
}

/*********************** 見出し・リボン風 ***********************/
/* 青 */
.ribbon_blue {
    position: relative;
    padding: 0.5em;
    background: #013893;
    color: #fff;
    margin-bottom: 25px;
}
.ribbon_blue::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
}

/* 水色 */
.ribbon_light-blue {
    position: relative;
    padding: 0.5em;
    background: #0693e3;
    color: #fff;
    margin-bottom: 25px;
}
.ribbon_light-blue::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
}

/* 黄色 */
.ribbon_yellow {
    position: relative;
    padding: 0.5em;
    background: #f8eb65;
    color: #000;
    margin-bottom: 25px;
}
.ribbon_yellow::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
}

/* 黒 */
.ribbon_black {
    position: relative;
    padding: 0.5em;
    background: #000;
    color: #fff;
    margin-bottom: 25px;
}
.ribbon_black::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
}

/*********************** 見出し・マーカー風 ***********************/
/* 青 */
.marker_blue {
    background: linear-gradient(transparent 70%, #013893 70%);
}
/* 水色 */
.marker_light-blue {
    background: linear-gradient(transparent 70%, #0693e3 70%);
}
/* 黄色 */
.marker_yellow {
    background: linear-gradient(transparent 70%, #f8eb65 70%);
}
/* 黒 */
.marker_black {
    background: linear-gradient(transparent 70%, #000 70%);
}

/*********************** 見出し・枠線 ***********************/
/* 青 */
.border-box_blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #013893;
}
.border-box_blue p {
    margin: 0;
    padding: 0;
}

/* 水色 */
.border-box_light-blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #0693e3;
}
.border-box_light-blue p {
    margin: 0;
    padding: 0;
}

/* 黄色 */
.border-box_yellow {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #f8eb65;
}
.border-box_yellow p {
    margin: 0;
    padding: 0;
}

/* 黒 */
.border-box_black {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000;
}
.border-box_black p {
    margin: 0;
    padding: 0;
}

/*********************** 見出し・角丸枠線 ***********************/
/* 青 */
.round-box_blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #013893;
    border-radius: 10px;
}
.round-box_blue p {
    margin: 0;
    padding: 0;
}

/* 水色 */
.round-box_light-blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #0693e3;
    border-radius: 10px;
}
.round-box_light-blue p {
    margin: 0;
    padding: 0;
}

/* 黄色 */
.round-box_yellow {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #f8eb65;
    border-radius: 10px;
}
.round-box_yellow p {
    margin: 0;
    padding: 0;
}

/* 黒 */
.round-box_black {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000;
    border-radius: 10px;
}
.round-box_black p {
    margin: 0;
    padding: 0;
}

/********************** 見出し・二重枠線 **********************/
/* 青 */
.double-box_blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #013893;
}
.double-box_blue p {
    margin: 0;
    padding: 0;
}

/* 水色 */
.double-box_light-blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #0693e3;
}
.double-box_light-blue p {
    margin: 0;
    padding: 0;
}

/* 黄色 */
.double-box_yellow {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #f8eb65;
}
.double-box_yellow p {
    margin: 0;
    padding: 0;
}

/* 黒 */
.double-box_black {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #000;
}
.double-box_black p {
    margin: 0;
    padding: 0;
}

/********************* 見出し・枠線(破線) *********************/
/* 青 */
.dashed-box_blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff;
    /*点線*/
    border: dashed 2px #013893;
}
.dashed-box_blue p {
    margin: 0;
    padding: 0;
}

/* 水色 */
.dashed-box_light-blue {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff;
    /*点線*/
    border: dashed 2px #0693e3;
}
.dashed-box_light-blue p {
    margin: 0;
    padding: 0;
}

/* 黄色 */
.dashed-box_yellow {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff;
    /*点線*/
    border: dashed 2px #f8eb65;
}
.dashed-box_yellow p {
    margin: 0;
    padding: 0;
}

/* 黒 */
.dashed-box_black {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff;
    /*点線*/
    border: dashed 2px #000;
}
.dashed-box_black p {
    margin: 0;
    padding: 0;
}

/********************** リスト・丸チェックマーク **********************/
ul.c-chklist {
    padding: 0.5em 1em 0.5em 2.3em;
    position: relative;
}
ul.c-chklist li {
    line-height: 1.5;
    padding: 0.5em 0;
    list-style-type: none!important;
}
ul.c-chklist li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    position: absolute;
    left : 1em;
    color: #71B9B0;
}

/*********************** タイムライン ***********************/
.timeline {
    list-style: none;
    margin: 0 auto 0 100px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-left: 4px solid #E9BA6A;
    box-sizing: border-box;
}
.timeline li { margin-left: 10px; }
.timeline span.time {
    width: 80px;
    display: inline-block;
    margin-left: -119px;
    padding: 0 0 5px;
    margin-top: 15px;
    vertical-align: top;
    position: relative;
    font-weight: 900;
    text-align: right;
}
.timeline span.time::after {
    content: "";
    position: absolute;
    top: 28px;
    right: -25px;
    background: #E9BA6A;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/*-------------------------------------------------------------------
    汎用クラス
-------------------------------------------------------------------*/

/*bold*/
.font-bold { font-weight: bold !important; }

/*display*/
.inlineblock{ display: inline-block; }

/*text-align*/
.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }
.text-left{ text-align: left !important; }

/*label*/
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  background-color: #000;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: .25em;
}
.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }

/*非表示*/
.non-display { display: none !important; }

/* line-height */
.lh-15{ line-height: 1.5 !important; }
.lh-20{ line-height: 2.0 !important; }

/******************************************
sp-br：スマホサイズ(767px以下)で表示
pc-br：PCサイズ(768以上)で表示
*******************************************/
.sp-br { display: none; }
.pc-br { display:block; }
@media screen and (max-width: 767px) {
    .sp-br { display: block; }
    .pc-br { display: none; }
}

/*********************** 太字色付き ***********************/
/* 黒 */
.color-black {
    color: #000 !important;
    font-weight: bold;
}
/* 青 */
.color-blue {
    color: #013893 !important;
    font-weight: bold;
}
/* 水色 */
.color-light-blue {
    color: #0693e3 !important;
    font-weight: bold;
}
/* 赤 */
.color-red {
    color: #c83e36 !important;
    font-weight: bold;
}

/*********************** 線 ***********************/
/*border solidデザイン*/
.bds_black{ border: 1px solid #333333 !important; }
.bds_blue{ border: 1px solid #013893 !important; }
.bds_lightblue{ border: 1px solid #0693e3 !important; }
.bds_yellow{ border: 1px solid #f8eb65 !important; }

/*********************** padding ***********************/
/*0*/
.p0 { padding: 0 !important; }
.ptb0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.prl0 { padding-right: 0 !important; padding-left: 0 !important; }
/*1rem*/
.p-s { padding: 1rem !important; }
.ptb-s { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.prl-s { padding-right: 1rem !important; padding-left: 1rem !important; }

/*********************** margin ***********************/
/*0*/
.m0 { margin: 0 !important; }
.mtb0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mrl0 { margin-right: 0 !important; margin-left: 0 !important; }

/*********************** flex ***********************/
/*縦並びの時にflexの順番を逆にする*/
@media (max-width: 767px){
    .flexrev{ flex-direction: column-reverse !important; }
}

/* 端末にマッチしたスペース */
/*wpのスペース100pxの調整 スマホの時は60pxにする*/
.variable-space100{
    height:100px;
}
@media screen and (max-width: 767px) {
    .variable-space100{
        height:60px;
    }
}

/*横フル表示にする*/
.fullarea {
    width: 100vw;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    margin: 0 calc(50% - 50vW);
}


/*********************** スクロールアニメーション ***********************/

/*上からフェードイン*/
.s_action.slideinTop { animation: slideinTop 1.5s;}
@keyframes slideinTop {
  0% {
    transform: translateY(-150px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/*左からフェードイン*/
.s_action.slideinLeft { animation: slideinLeft 1.5s;}
@keyframes slideinLeft {
  0% {
    transform: translate3d(-100%,0,0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

/*左からフェードイン*/
.s_action.slideinRight { animation: slideinRight 1.5s;}
@keyframes slideinRight {
  0% {
    transform: translate3d(100%,0,0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}