@charset "UTF-8";
/* 文字コードの指定 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
/* 定数 */
:root {
    /*----------------------------------------------
    sub_cover独自の各種定数
    ----------------------------------------------*/
    --font-size-sub-cover-company: 4.1vw; /*8rem*/
    --font-size-sub-cover-title1: 2.5vw; /*4.8rem;*/
    --font-size-sub-cover-title2: 2vw; /*3.9rem;*/
    --font-size-sub-cover-title1: 4.8rem;
    --font-size-sub-cover-title2: 3.9rem;
}
/*-------------------------------------------------------------------------------- 
    カバー(sub_cover)のスタイル
--------------------------------------------------------------------------------*/
/* トップページカバー */
.sub_cover{
    height: 100vh; 
}
 /*---------------------------------------------------------
	top head image
-----------------------------------------------------------*/
.sub_cover_image_wrap {
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100vh; 
	margin: 0 auto 0;
	padding: 0;
	background: black;
}
.sub_cover_image_wrap img{
    width:100%;
    height: 100%; 
    object-fit: cover;
}

 /*---------------------------------------------------------
	top head text slider on image slider
-----------------------------------------------------------*/
.sub_cover_text_wrap {
    position:absolute;
    z-index: 10;
    top:0;
    /*ヘッダーの高さ分*/
    height: 100%;
    overflow-x: hidden;
    width:100%;
    display:flex;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sub_cover_title{
    padding: 1rem 3rem;
    margin-left: 15%;
}

.sub_cover_title1 {
    margin: 0;
    color:var(--white);
    color: rgba(252, 44, 44, 1);
    font-size: var(--font-size-sub-cover-title1);
    font-weight: 800;
    font-family: var(--font-family);
    line-height: 1;
    width: 100%;
    text-align: center;
    text-shadow: .1rem .1rem .1rem var(--black);
}

.sub_cover_title2 {
    margin: 0;
    color:var(--white);
    font-size: var(--font-size-sub-cover-title2);
    font-weight: 800;
    font-family: var(--font-family);
    line-height: 1;
    text-align: center;
    text-shadow: .1rem .1rem .1rem var(--black);
}
.sub_cover_title2 img{
    width: 90%;
    margin: 0 auto;
    margin-left: 30%;
}

/*-----------------------------------------------------------
	sub_cover left image
------------------------------------------------------------*/
.sub_cover_left{
    position:relative;
}
/* 画面左端の台形画像 */
.sub_cover_left img{
    z-index: 2;
    position:absolute;
    top: 0;
    left: 0;
    width: auto; /*固定の場合*/
    width: 18%;
    height: 100vh;
}

/*-----------------------------------------------------------
	text on left
------------------------------------------------------------*/
.sub_cover_company_name {
    z-index: 2;
    position:absolute;
    top:0;
    left: 0;
    height: 100%;
    overflow-x: hidden;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: var(--font-size-sub-cover-company);
    font-weight: 600;
    font-family: var(--font-family);
    color:var(--white);
    transform: skewX(-15deg);
}
.sub_cover_company_name1 {
    margin: 0;
    margin-left: 4vw;
    line-height: 1;
}
.sub_cover_company_name2 {
    margin: 0;
    margin-left: 13.2vw;
    padding: 0;
    padding-top: 1rem;
    line-height: 1;
}
.sub_cover_company_name1_1{
    color:var(--main-color1);
}
.sub_cover_company_name2_1{
    color:var(--main-color1);
}

/* --------------------------------------------------
	以上が 1300pxを超えるＰＣ端末環境設定
----------------------------------------------------- */
/* --------------------------------------------------
	ここから 1300px以下のPC端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 1300px) {
    :root{
        /*(1300以下はwidthごとに最大vwで指定)*/
        --font-size-sub-cover-title1: 2.5vw; /*3remのview換算値*/
        --font-size-sub-cover-title2: 2vw; /*10remのview換算値*/
        --font-size-sub-cover-title1: 4.0rem;
        --font-size-sub-cover-title2: 3.5rem;
        }
    /*-------------------------------------------------------------------------------- 
        カバー(sub_cover)のスタイル
    --------------------------------------------------------------------------------*/
    /*---------------------------------------------------------
        top head image
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        top head text slider on image slider
    -----------------------------------------------------------*/
}
/* --------------------------------------------------
    ここから 768px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 768px){
    :root{
        /*(1300以下はwidthごとに最大vwで指定)*/
        --font-size-sub-cover-title1: 2.5vw; /*3remのview換算値*/
        --font-size-sub-cover-title2: 2vw; /*10remのview換算値*/
        --font-size-sub-cover-title1: 3.5rem;
        --font-size-sub-cover-title2: 3.0rem;
    }
    /*-------------------------------------------------------------------------------- 
        カバー(sub_cover)のスタイル
    --------------------------------------------------------------------------------*/
    /*---------------------------------------------------------
        top head image
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        top head text slider on image slider
    -----------------------------------------------------------*/
}
/* --------------------------------------------------
	ここから 480px以下のモバイル端末環境設定
----------------------------------------------------- */
@media screen and (max-width:480px){
    :root{
        --font-size-sub-cover-title1: 6vw; /*のview換算値*/
        --font-size-sub-cover-title2: 5vw; /*のview換算値*/
        --font-size-sub-cover-title1: 2.8rem;
        --font-size-sub-cover-title2: 2.3rem;
    }
    /*-------------------------------------------------------------------------------- 
        カバー(sub_cover)のスタイル
    --------------------------------------------------------------------------------*/
    /*---------------------------------------------------------
        top head image
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        top head text slider on image slider
    -----------------------------------------------------------*/
}