@charset "utf-8"; @font-face {
    font-family: "aperu";
    src: url('../font/FontsFree-Net-ApercuMedium.woff') format('woff');
}

@font-face {
    font-family: "rubik";
    src: url('../font/Rubik-Medium.woff') format('woff');
}

@font-face {
    font-family: "averllion";
    src: url('../font/North Avellion DEMO.woff') format('woff');
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
電話番号のフォントファミリーを指定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tel_font,.tel_font a {
    font-family: "rubik";
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　＞　サイトのテーマ色を一括指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 文字色 */
body.sp[class*="voice"] ul.child_navi a[href*="voice"], body.sp dl.type01 [class*="current"] > a, body.sp dl.type01 dt, a.basic_btn02, .basic_list01 li:before, ol.basic_list02 > li:after, a.basic_color_font, [class*="current"] .basic_color_font_cur, [class*="current"] .basic_color_font_cur:hover, .basic_color_font_bf:before, .basic_color_font_af:after, .cmn_kadomaru {
    color: #f89b00;
}

/* ボーダー色 */
body.sp dl.type01 > dt .arrow, h3[class*="h3a"], h2[class*="h2a"], .basic_box02, .basic_list02 > li, .basic_color_border, .basic_color_border_bg:before, .basic_color_border_af:after, .cmn_kadomaru {
    border-color: #f89b00;
}

/* 背景色 */
a.basic_btn01, h3[class*="h3b"], ol.basic_list02 > li:before, .basic_color_bg, .basic_color_bg_bf:before, .basic_color_bg_af:after, #h_navi_main ul:not(.sub-menu) > li > a:after {
    background-color: #f89b00;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　＞　画像がない場合の汎用スタイル（一覧ページ／ショートコード／関連記事…などで共有）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.noimage {
    background-image: url("../images/noimage.jpg");
    background-size: 100%;
    background-color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用見出し
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* [.h2a][.h2b]共通のスタイル */
h2[class*="h2"] {
    font-size: 3.0rem;
    font-weight: bold;
}

/* [.h2a]のスタイル */
h2[class*="h2a"] {
    padding: 7px 0px;
    border-top: 2px solid;
    border-bottom: 2px solid;
}

h2[class*="h2b"] {
    padding: 55px 0 0px;
}

h2[class*="h2b"]:before {
    width: 40px;
    height: 40px;
    right: calc(50% - 20px);
    background-image: url(../images/h2b_icon.svg);
    background-color: inherit;
}

/* [.h3a][.h3b]共通のスタイル */
h3[class*="h3"] {
    font-weight: bold;
}

/* [.h3a]のスタイル */
h3[class*="h3a"] {
    padding: 10px 0 10px 20px;
    border-left-width: inherit;
    border-left-style: none;
    position: relative;
}

h3.h3a::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #080404;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fff),color-stop(.75, #fff), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 5px 5px;
}

/* [.h3b]のスタイル */
h3[class*="h3b"] {
    background-color: #080404;
    padding: 12px 15px;
}

a.basic_btn01 {
    font-weight: bold;
    padding: 22px 30px;
}

.basic_table01 th {
    background-color: #fff2e1;
}

.basic_table01 th, .basic_table01 td {
    border: 1px solid #ebc17b;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用ボックス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.basic_box01 {
    background-color: #f8f4ee;
}

.basic_box02 {
    border-color: #080404 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用タイトル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
h2.cmn_ttl .en {
    font-size: 4.8rem;
    font-family: "aperu";
    display: block;
}

h2.cmn_ttl .ja {
    font-size: 1.6rem;
    font-family: "hira_kakugo_w7";
    letter-spacing: 1.8px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
追加汎用クラス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.aperu {
    font-family: "aperu";
}

.cmn_kasen {
    border-bottom: solid 2px #000;
    padding-bottom: 5px;
    display: inline;
    line-height: 2;
    font-weight: bold;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
プロモ　＞Vegas スケールサイズ変更
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vegas-animation-kenburns {
    animation: kenburns ease-out;
}

@keyframes kenburns {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　プロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#promo_frame .promo_box {
    background: url("../../cyber-child/images/promo01.jpg") no-repeat center/cover;
    width: calc(100% - 100px - 100px);
    max-width: 1700px;
    max-height: 780px;
    text-align: center;
    position: relative;
    height: 100%;
    padding: 62px 0;
}

#promo_frame .promo_box .vegas02 {
    height: 100%;
    width: 100%;
    max-width: 1700px;
    max-height: 780px;
    position: absolute;
    top: 0;
    left: 0;
}

#promo_frame .promo_box p.main_img {
    /* width: 100%; */
    margin-bottom: 40px;
    height: 91%;
    max-height: 596px;
    position: relative;
}

#promo_frame .promo_box p.main_img img {
    height: 100%;
    max-height: 596px;
}

#promo_frame .promo_box p.scroll {
    font-size: 1.5rem;
    color: #fff;
    font-family: "aperu";
    position: relative;
}

#promo_frame .promo_box p.scroll::after {
    content: '';
    position: absolute;
    bottom: -62px;
    left: 50%;
    width: 1px;
    height: 62px;
    background: #fff;
    animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　新着情報　
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.cmn_post_list li {
    /*width: 428px!important;*/
    /*min-width: 350px;*/
}

ul.cmn_post_list li .area_a {
    margin-bottom: 10px;
}

ul.cmn_post_list li .area_a p.img_container {
    padding-top: 54%;
}

ul.cmn_post_list li .area_b .f_wrap {
    justify-content: space-between;
    margin: 5px 0;
    align-items: center;
}

ul.cmn_post_list li .area_b p.date {
    font-size: 1.6rem;
    font-weight: bold;
    font-family: "aperu";
}

ul.cmn_post_list li .area_b p.cat {
    font-size: 1.3rem;
    border: 2px solid #151515;
    padding: 0 5px;
    font-weight: bold;
    min-width: 70px;
    text-align: center;
}

ul.cmn_post_list li .area_b p.txt a {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #151515;
    text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
サービス紹介一覧
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.cmn_service_list {
    margin: 0 -15px -50px;
}

ul.cmn_service_list li {
    flex-direction: column;
    width: calc(50% - 30px);
    max-width: 735px;
    margin: 0 15px 50px!important;
}

ul.cmn_service_list li:hover {
    opacity: 1;
}

ul.cmn_service_list li .bg {
    background: no-repeat 100% / cover;
    padding: 126px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 400px;
    margin-bottom: 10px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

ul.cmn_service_list li .bg::after {
    background: no-repeat 100% / cover;
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all .5s ease;
    z-index: -1;
}

ul.cmn_service_list li.business .bg::after {
    background-image: url("../images/service_img01.jpg");
}

ul.cmn_service_list li.school .bg::after {
    background-image: url("../images/service_img02.jpg");
}

ul.cmn_service_list li.care .bg::after {
    background-image: url("../images/service_img03.jpg");
}

ul.cmn_service_list li.catering .bg::after {
    background-image: url("../images/service_img04.jpg");
}

ul.cmn_service_list li:hover .bg::after {
    transform: scale(1.1)
}

ul.cmn_service_list li p.btn a {
    position: relative;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    border: 5px solid;
    padding: 45px 55px;
    min-width: 380px;
}

ul.cmn_service_list li p.btn a::before, ul.cmn_service_list li p.btn a::after {
    content: "";
    position: absolute;
    background: no-repeat 50% / contain;
}

ul.cmn_service_list li p.btn a::before {
    top: -30px;
    left: -60px;
}

ul.cmn_service_list li.business p.btn a::before {
    width: 178px;
    height: 80px;
}

ul.cmn_service_list li.business p.btn a::before {
    background-image: url("../images/service_icon01.png");
}

ul.cmn_service_list li.school p.btn a::before {
    width: 258px;
    height: 74px;
}

ul.cmn_service_list li.school p.btn a::before {
    background-image: url("../images/service_icon02.png");
}

ul.cmn_service_list li.care p.btn a::before {
    width: 282px;
    height: 76px;
}

ul.cmn_service_list li.care p.btn a::before {
    background-image: url("../images/service_icon03.png");
}

ul.cmn_service_list li.catering p.btn a::before {
    width: 252px;
    height: 72px;
}

ul.cmn_service_list li.catering p.btn a::before {
    background-image: url("../images/service_icon04.png");
}

ul.cmn_service_list li p.btn a::after {
    background-image: url("../images/migi.svg");
    width: 25px;
    height: 20px;
    top: calc(50% - 10px);
    right: 20px;
}

ul.cmn_service_list h3.lead {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フレームデザイン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.base_width2 {
    width: 100%;
    margin: 0 auto;
    max-width: 1500px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ　＞　ヘッダー画像
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page_promo_wrap {
    position: relative;
}

.page_promo {
    position: relative;
    z-index: 0;
}

.page_promo .img_wrap {
    height: 400px;
    margin: 0 5vw;
}

.page_promo .inner {
    color: #fff;
}

.page_promo .sub_ttl {
    display: none;
}

body:not(.search):not(.error404) .page_promo .ttl {
    font-size: 1.6rem;
    letter-spacing: 1.8px;
}

.page_promo .slug {
    display: block;
    font-family: 'aperu';
    font-size: 5.0rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　ツイートエリア非表示
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tweet_area {
    display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞新着情報
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_news {
    position: relative;
    padding: 35px 200px 60px;
}

#home_news p.main_txt {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 100px;
}

#home_news .inner {
    position: relative;
    flex-wrap: nowrap;
}

#home_news h2.cmn_ttl {
    width: 150px;
    margin-right: 100px;
    padding: 80px 0 20px;
    z-index: 3;
}

#home_news h2.cmn_ttl span {
    width: 150px;
}

#home_news h2.cmn_ttl .en {
    font-size: 5.0rem;
}

#home_news .swiper-container {
    overflow: visible;
    margin-left: 0;
    width: 850px;
    position: static;
}

#home_news .swiper-container::before,#home_news .swiper-container::after {
    position: absolute;
    content: "";
    background: #f8f4ee;
    height: calc(100% + 70px + 80px);
    top: -70px;
    z-index: 0;
}

#home_news .swiper-container::before {
    max-width: 970px;
    width: 65%;
    left: 250px;
}

#home_news .swiper-container::after {
    width: 1000px;
    left: -750px;
}

#home_news .swiper-container .swiper-button_wrap {
    position: absolute;
    top: -50px;
    right: calc(50% - 600px);
    width: 100px;
}

#home_news .swiper-container .swiper-button_wrap .swiper-button-next, #home_news .swiper-container .swiper-button_wrap .swiper-button-prev {
    background-size: 12px 12px;
    border: 2px solid;
    border-radius: 50%;
    width: 44px;
    background-color: #fff
}

#home_news .swiper-container .swiper-button_wrap .swiper-button-next {
    background-image: url("../images/right.svg");
    right: 0;
}

#home_news .swiper-container .swiper-button_wrap .swiper-button-prev {
    background-image: url("../images/left.svg");
    left: 0;
}

#home_news ul.cmn_post_list.f_wrap {
    flex-wrap: nowrap;
}

#home_news p.main_btn {
    position: absolute;
    top: 200px;
    left: 0;
    z-index: 3;
}

#home_news p.main_btn a {
    min-width: 140px;
    background: #282828;
    font-weight: bold;
    color: #fff;
    padding: 10px 20px;
    border: 2px solid #282828;
}

#home_news p.main_btn a:hover {
    opacity: 1;
    background: #fff;
    color: #282828;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
サービス▼
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_service.kugiri_m {
    padding: 60px 0 120px;
}

#home_service .base_width2 {
    width: 95%;
}

#home_service h2.cmn_ttl {
    text-align: center;
    margin-bottom: 50px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
私たちについて▼
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_about {
    position: relative;
    z-index: 0;
}

#home_about::before {
    position: absolute;
    content: "";
    width: 1200px;
    height: calc(100% - 200px);
    min-height: 385px;
    background: #f9f4ec;
    z-index: -1;
    top: 0;
    right: 0;
}

#home_about.kugiri_m {
    padding: 70px 0;
}

#home_about .bg::before {
    position: absolute;
    content: "";
    width: 284px;
    height: 436px;
    top: -35px;
    left: calc(50% - 385px);
    z-index: -1;
}

#home_about.lazyloaded .bg::before {
    background: url("../images/about_area_img.png") no-repeat 50% / contain;
}

#home_about .box {
    width: 50%;
}

#home_about .txt_area{
    padding: 60px 0 0 calc(100% - 600px);
}

#home_about h2.cmn_ttl {
    margin-bottom: 30px;
}

#home_about h2.cmn_ttl .en {
    line-height: 1.1;
    display: block;
}

#home_about p.main_ttl {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 20px;
}

#home_about p.main_txt {
    margin-bottom: 20px;
}

#home_about p.main_btn a {
    min-width: 280px;
    background: #282828;
    color: #fff;
    padding: 20px;
    border: 2px solid #282828;
    font-weight: bold;
}

#home_about p.main_btn a:hover {
    opacity: 1;
    background: #fff;
    color: #282828;
}

#home_about p.main_img {
    width: 50%;
}

#home_about p.main_img img {
    width: 100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
選ばれる理由　▼
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_reason {
    background: #f6f5f4;
}

#home_reason.kugiri_m {
    padding: 70px 0 80px;
}

#home_reason h2.main_ttl {
    position: relative;
    text-align: center;
    z-index: 1;
    font-size: 3.0rem;
    font-weight: bold;
    padding-top: 40px;
    margin-bottom: 105px;
}

#home_reason h2.main_ttl::before {
    position: absolute;
    content: "";
    width: 156px;
    height: 61px;
    z-index: -1;
    top: 0;
    left: calc(50% - 78px);
    font-family: "aperu";
}

#home_reason.lazyloaded h2.main_ttl::before {
    background: url(../images/reason_bg.png) no-repeat 50% / contain;
}

#home_reason ol.items {
    justify-content: center;
    margin: 0 -10px -65px;
}

#home_reason ol.items li {
    width: 25vw;
    background: #fff;
    margin: 0 10px 65px;
    padding: 50px 40px 20px;
    min-width: 380px;
    position: relative;
}

#home_reason ol.items li:hover {
    opacity: 1;
}

#home_reason ol.items li h3.ttl a {
    position: absolute;
    display: flex;
    align-items: center;
    top: -56px;
    left: 0;
    font-size: 2.2rem;
}

#home_reason ol.items li h3.ttl .ja {
    font-weight: bold;
}

#home_reason ol.items li h3.ttl .num {
    position: relative;
    padding: 0 9px 0 20px;
    min-width: 127px;
}

#home_reason ol.items li h3.ttl .num::before , #home_reason ol.items li h3.ttl .num::after {
    font-family: "aperu";
}

#home_reason ol.items li h3.ttl .num::before {
    content: "REASON";
    font-size: 1.5rem;
    transform: rotate(90deg);
    bottom: 45px;
    left: -17px;
    position: absolute;
}

#home_reason ol.items li h3.ttl .num::after {
    content: counter(ol_cnt, decimal-leading-zero);
    font-size: 8.0rem;
}

#home_reason ol.items li p.img {
    margin-bottom: 10px;
    padding-top: 50%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
会社案内　▼
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_com {
    position: relative;
    height: 516px;
}

#home_com.kugiri_m {
    padding: 75px 0 50px;
}

#home_com::before {
    content: "";
    position: absolute;
    width: 959px;
    height: 516px;
    right: calc(50% - 959px);
    top: 0;
}

#home_com.lazyloaded::before {
    background: url(../images/com_bg.jpg) no-repeat;
}

#home_com .box {
    padding-right: 20px;
    width: 600px;
}

#home_com .box h2.cmn_ttl {
    text-align: center;
    margin-bottom: 30px;
    padding-right: 70px;
}

#home_com .box h2.cmn_ttl .en {
    font-size: 3.7rem;
}

#home_com .box .main_txt {
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    padding-right: 70px;
}

#home_com .box ul.items {
    margin: 0 -10px 0 -20px;
}

#home_com .box ul.items li {
    margin: 0 10px;
}

#home_com .box ul.items li a {
    min-width: 260px;
    padding: 20px;
    display: block;
    text-align: center;
    color: #fff;
    font-weight: bold;
}

#home_com .box ul.items li.contact a {
    background: #282828;
    border: 2px solid #282828;
}

#home_com .box ul.items li.contact a:hover {
    background: #fff;
    color: #282828;
}

#home_com .box ul.items li.recruit a {
    background: #f89b00;
    border: 2px solid #f89b00;
}

#home_com .box ul.items li.recruit a:hover {
    background: #fff;
    color: #f89b00;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
お問い合わせ　▼
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body[class*="contact"] div#f_navi_wrap {
    border-top: 1px solid #ddd;
}

#contact_area {
    background: #282828;
    color: #fff;
}

#contact_area.kugiri_m {
    padding: 70px 0 60px;
}

#contact_area h2.main_ttl {
    width: 192px;
    margin: 0 auto;
    font-family: "averllion";
    font-size: 12rem;
    line-height: 1;
}

#contact_area p.main_txt {
    text-align: center;
    margin-bottom: 25px;
    font-weight: bold;
}

#contact_area .tel_wrap {
    text-align: center;
    margin-bottom: 20px;
}

#contact_area .tel_wrap p.tel a {
    position: relative;
    font-size: 3.2rem;
    line-height: 1.2;
    padding: 0 40px;
    font-family: "rubik";
}

#contact_area .tel_wrap p.tel a::before {
    position: absolute;
    content: "\f095";
    font-family: "icomoon";
    top: calc(50% - 16px);
    left: 0;
    color: #F89B00;
    font-size: 28px;
}

#contact_area .tel_wrap .open {
    font-weight: bold;
    font-size: 1.5rem;
}

#contact_area p.main_btn {
    text-align: center;
}

#contact_area p.main_btn a {
    position: relative;
    color: #fff;
    border: 2px solid;
    min-width: 340px;
    padding: 30px 85px;
    font-weight: bold;
}

#contact_area p.main_btn a::before {
    position: absolute;
    content: "\e90d";
    display: inline-block;
    font-family: "icomoon";
    margin-right: 12px;
    font-size: 13px;
    top: calc(50% - 11px);
    left: 60px;
    font-weight: normal;
}