@charset "utf-8";


/* 見出し大3(サイトに反映させたい画像へのルートパスを記述・相対パスだと管理画面で404になるため) */
.gb-headline-h_large3::before {
    background: url("./images/logo_icon.svg") no-repeat center center / contain;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用ボタン　hover表現
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gb-button-basic_btn01{
	overflow: hidden;
}

.gb-button-basic_btn01::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 61px;
	/* transform: translateX(0px) translateY(0px); */
	background: #0eb2f1;
	z-index: -1;
}
@media (min-width: 768px) {
	.gb-button-basic_btn01::before {
		transition: width .5s ease-in;
	}
}

.gb-button-basic_btn01:hover::before{
	/* width: 500px; */
	width: 100%;
	/* height: 61px; */
	/* transform: translateX(-175px) translateY(0px); */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ　＞　プロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_promo .inner::before {
    content: '';
    background: url(./images/promo_logo.png) no-repeat 50% / contain;
    position: absolute;
    width: 21vw;
    height: 21vw;
    left: 2.9vw;
    top: -5.7vw;
}

/* 動画の高さ指定 */
#home_promo .wp-block-cover {
    /*---変数をサポートしていないブラウザのフォールバック ---*/
	height: 100vh;
	/*---プロモ高さ設定---*/
	height: calc(100svh - 0px);
	/*---タブレットを縦で表示した時のための記述---*/
 	max-height: 60vw;
	position:relative;
}

/*カバーブロックの上下のマージン削除*/
.entry-content .wp-block-cover {
	margin: 0;
}

/*色が継承されるため書き換える*/
.wp-block-cover p:not(.has-text-color),
.wp-block-cover h2:not(.has-text-color){
	color: #fff;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ　＞　ニュースエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_news .ttl {
    width: 27vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#home_news .ttl a:hover {
    text-decoration: underline;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ　＞　どこにも負けない自慢の技術
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_tec::after {
    content: '';
    position: absolute;
    background: url(./images/tec_txt-2.png) repeat-x 50% / contain;
    width: 4000px;
    height: 100%;
    top: 255px;
    left: 0;
    animation: bg-slider 90s linear infinite;
}

/* スライドアニメーション */
@keyframes bg-slider {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -4000px 0;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ　＞　カトーメテックのこだわり
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_koda .ttl::after {
    content: '';
    background: url(./images/koda_after.png) no-repeat 50% / contain;
    width: 12vw;
    height: 8.6vw;
    position: absolute;
    right: -8vw;
    top: -8.1vw;
}

#home_koda::after {
    content: '';
    width: 38vw;
    height: 1008px;
    position: absolute;
    background: var(--company-color);
    bottom: 0;
}

#home_koda .inner::before {
    content: '';
    background: url(./images/usp_after.jpg) no-repeat 50% / cover;
    width: 12.3vw;
    height: 29.1vw;
    position: absolute;
    left: 0;
    top: 0;
	z-index: 2;
}

#home_koda .inner::after {
    content: '';
    background: url(./images/kato_txt.png) repeat-x 50% / contain;
    width: 2690px;
    height: 100%;
    position: absolute;
    left: 0;
	z-index: 2;
    margin-top: 55px;
    animation: bg-slider2 90s linear infinite;
}

/* スライドアニメーション */
@keyframes bg-slider2 {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -2690px 0;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ　＞　会社案内
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_company mark.has-inline-color {
    padding: 9px 15px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ　＞　採用情報
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_recruit .btn::after {
    font-family: "icomoon";
    content: '\e917';
    font-size: 20px;
    font-weight: normal;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    right: 20px;
    border: 1px solid;
    border-radius: 50%;
    padding: 20px;
	transition: .3s;
}

#home_recruit:hover .btn::after {
    background: #ffffff38;
    color: #fff;
    border-color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
コンタクトエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#contact_area::after {
    content: '';
    background: url(./images/contact_after.png) no-repeat 50% / contain;
    width: 260px;
    height: 171px;
    position: absolute;
    right: -45px;
    top: -72px;
}

.cmn_tel01::before {
    font-size: 20px;
    border: 1px solid;
    border-radius: 50%;
    padding: 12px 14px;
    vertical-align: 0.2em;
    margin-right: 15px;
}

#contact_area .btn .gb-icon {
	transition: .3s;
}

#contact_area .gb-button.btn:hover .gb-icon {
    transform: translateX(10px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層　＞　ページプロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.note_page_promo {
    position: relative;
}

.note_page_promo::after {
    content: '';
    width: 100%;
    height: 109px;
    left: calc( 50% - 600px );
    bottom: 0;
    position: absolute;
    background: url("./images/header_txt.png")no-repeat left bottom / contain;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
noimageの時の画像サイズ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[style*="noimage"] {
    background-size: 15%!important;
    opacity: 0.3;
}