/* 初期設定のcss(見える化) */
header {
    position: fixed;
    z-index: 100;
    top: 0;
}

footer {
    background: #f6f9ed;
}

/* 何だこの設定は...？

.content_wrap,
header,
footer {
    max-width: 750px;
    margin: 0 auto;
}

初期設定のcss(見える化) */

header,
footer {
    max-width: 750px;
    margin: 0 auto;
}


/*------------------------------

【SP】 Header

------------------------------*/



input {
    appearance: revert;
    display: none;
}

.hum_line {
    border-bottom: solid 3px white;
    width: 100%;
    height: 10px;
    margin: 3px;
}

/* メニューの中身 */

#gnav ul{
    padding: 15px 40px 5px;
    font-size: 1.5rem;
    color: #009844;
    font-family: Avenir, Arial, Helvetica, sans-serif;
}

/* メニューの中身 

#gnav ul{
    padding: 40px;
    font-size: 1.5rem;
    color: #009844;
    font-family: Avenir, Arial, Helvetica, sans-serif;
}


#gnav li{
    margin: 0 0 20px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #009844;
}

*/

#gnav li{
    margin: 0 0 15px 0;
    padding: 0 0 5px 0;
    border-bottom: 1px solid #009844;
}

#menu_contents_sp {
    background: #f6f9ed;
    height: 100%;
    width: 100%;
    transform: translateX(-100%);
    background-image: url(img/header_bkimg_sp.png);
}

#input:checked~#menu_contents_sp {
    transform: translateX(0);
}

#hum_menu_sp {
    position: relative;
}

label {
    position: absolute;
    top: 2%;
    left: 87%;
    width: 30px;
}

#logo_area {
    position: absolute;
    top: 3%;
    left: 4%;
    width: 200px;
}

#hum_menu_pc{
    display: none;/*なぜか消えないので掛け直し */
}


/*------------------------
リンク押せない問題
------------------------*/

header {      
    z-index: 2;
    pointer-events: none;
  }

header a,
header label,
#vision button,
#policy_3 button,
#n_item_05 button{
    pointer-events: auto;
  }




/*------------------------------

【SP】Footer

------------------------------*/



/* 【SP】　フッター */

#container_foot {
    grid-template:
        "logo" 68.5px/* (53px) */
        "tel" 207px/* (192px) */
        "mail" 78px/* (47px) */
        "info" 119px/* (47px・15px) */
        "address" 59px/* (53px) */
         / 1fr;
    padding:  33px 50px 18.5px;

}

#f_item_01 {
    grid-area: logo;
}

#f_item_02 {
    grid-area: tel;
}

#f_item_02 p {
    padding: 0 0 10px 0;/* 番号の分調整 */
}

#f_item_02 a {
    padding: 0 0 10px 0;
    display: inline-block;
}

#f_item_03 {
    grid-area: mail;
}

#f_item_04 {
    grid-area: info;
}

#f_item_05 {
    grid-area: address;
}


.item_tel {
    background: white;
    text-align: center;
    /* アンカー(tel)を中央寄席する設定 */
    padding: 12% 0 0 0;

}

/* ジャスティファイ設定をリセット */

.item_tel p {
    text-align: center;
}

.item_tel a {
    color: #009844;
    font-size: 43px;/* 35px */
    font-weight: 700;
    font-family: 'Ropa Sans', sans-serif;
}

.item_mail {
    text-align: center;
}

.item_mail .next_view {
    font-weight: 700;
    border: solid 2px #009844;
    border-radius: 30px;
    background: white;
    padding: 10px 0;
    width: 100%;
    text-align: center !important;
}


#copylight {
    background: #009844;
    color: white;
    padding: 16.5px 0;
}

#copylight p {
    text-align: center;
}

.flex_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;/*スマホの設定 */
}


#f_item01 {
    flex-basis: 50%;
    padding: 0 0 0 0;
    margin: 0 13px 0 0;
}

#f_item01 img {
    width: 23%;
}

#f_item01 img{
    padding: 0 10px 0 0;

}

#f_item02 {
    flex-basis: 45%;
    border-left: solid 1px black;
    padding: 0 0 0 24px;
}

#f_item03 {
    font-size: 1.25rem;
    padding: 25px 0 0 0;
}

.pad_x{
    padding: 0 !important;
}

#f_item01 a{
    display: contents;
}

/* サポート企業箇所 */

#foot_pa_wrap{
    background: white;
}


#container_pa {

    grid-template-columns: 1fr 1fr; /*よこの並びは均等に2つ*/
	grid-template-rows: 1fr 1fr 1fr; /*縦の並びは均等に4つ*/
    align-items: center;
    padding:  17px 17px 15px;
    border: 2px solid #009844;
    

}


#f_pa_item_01 {
    grid-area: title;
}

#f_pa_item_02 {
    grid-area: logo01;
}

#f_pa_item_03 {
    grid-area: logo02;
}

#f_pa_item_04 {
    grid-area: logo03;
}

#f_pa_item_05 {
    grid-area: logo04;
}

.foot_border{
    padding: 25px;
}




/*--------------------------------

【共通設定】

スマホだけに適応
(どうしても不具合がある場合や面倒な時のみここに記述)

ホントは520らしいけどめんどくさいので599まで設定

--------------------------------*/

@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 599px) {

        

    #f_pa_item_01 {
        grid-column: 1 / 3; /*このセルの横は1から3まで*/
        grid-row: 1 / 2; /*このセルの縦は1から2まで*/
        max-width: 60%;
        margin: 0 auto;
    }
    
    #f_pa_item_02 {
        grid-column: 1; /*このセルの横は1から3まで*/
        grid-row: 2 / 3; /*このセルの縦は1から2まで*/
    }
    
    #f_pa_item_03 {
        grid-column: 2; /*このセルの横は1から3まで*/
        grid-row: 2 / 3; /*このセルの縦は1から2まで*/
    }
    
    #f_pa_item_04 {
        grid-column: 1; /*このセルの横は1から3まで*/
        grid-row: 3 / 4; /*このセルの縦は1から2まで*/
    }
    
    #f_pa_item_05 {
        grid-column: 2; /*このセルの横は1から3まで*/
        grid-row: 3 / 4; /*このセルの縦は1から2まで*/
    }

        
            

    
}









/*--------------------------------

【共通設定】

[pad小]---[PC小]

(grid・文字装飾・パディング・表示非表示)

--------------------------------*/

@media only screen 
  and (min-device-width: 600px) 
  and (max-device-width: 899px) {
    /*　900px~最大サイズまでずっとこの設定*/
    /*　＝対応デバイス（600px-800pxくらいのタブレット/ipad）*/
        


         /************************
        footer　　　　【確】
        ************************/

        /* footerのグリット・設定変更中 */
           
        #container_foot {
            grid-template-columns: 240px 1fr 1fr 1fr;
            grid-template-rows: 57px 128px 55.6px 48px;
            gap: 30px;
            grid-template-areas: none;
            padding: 70px 50px;
        }

        /* padはsp設定になっているので再表示 */

         /* padのみ消えているサイトマップの部分・他のものも表示されるので、viewpadとかにして再設定

        .view_pc {
            display: block;
            /
        }

         */

         /******* 
        1列目
        *******/

    /* logo */

    #f_item_01 {
        grid-column: 1;
        grid-row: 1;
        }
    
         /* tel */
    
        #f_item_02 {
        grid-column: 1;
        grid-row: 2 / 4;
        margin:0;
        }
    
         /* mail */
    
        #f_item_03 {
        grid-column: 1;
        grid-row: 4;
        }
    
        /******* 
        2列目
        *******/
    
        /* 個人情報・snsのフレックス */
    
        #f_item_04 {
        grid-column: 2 / 5;
        grid-row: 3;
        justify-content: flex-end;
        }
    
        /* アドレス */
    
        #f_item_05 {
            grid-column: 2 / 5;
            grid-row: 4;
            }
    
        /******* 
        PCのみ
        *******/    
    
    
        #f_pc_item_01{
            grid-column: 2 / 3;
            grid-row: 1;
            }
    
        /* サイトマップ文章 */
    
        #f_pc_item_01 p,
        #f_pc_item_02 p,
        #f_pc_item_03 p,
        #f_pc_item_04 p,
        #f_pc_item_05 p,
        #f_pc_item_06 p
        {
            padding: 16px 0 0 0;
            line-height: 1;
    
        }
    
        #f_pc_item_01,
        #f_pc_item_02,
        #f_pc_item_03,
        #f_item_05{
            padding: 0 0 0 20px;
        }
    
        #f_pc_item_04,
        #f_pc_item_05,
        #f_pc_item_06{
            padding: 49px 0 0 20px;
        }
    
        #f_pc_item_04 p{
            line-height: 2.2rem;
        }
    
    
        .flex_box{
            flex-wrap: nowrap;
        }
    
        #f_item01{
            order: 2;
            flex-basis: 20%;
            margin: 0 15px 0 0;
        }
    
        #f_item02{
            order: 3;
            flex-basis: 20%;
        }
    
        #f_item03{
            order: 1;
            padding: 0 0 0 20px;
            font-size: 1.5rem;
            margin-right: auto;
        }
    
    
            .s_map_h4{
                border-bottom: 1px solid black;
                padding: 0 0 11px 0;
                line-height: 1;
            }
    

        /* パートナー企業 */

        #f_pa_item_01 {
            padding: 0 0 0 0;
        }

        #container_pa{
            align-items: center;
        }
        

        #container_pa {
            grid-template:
                "title logo01 logo02 logo03 logo04" 1fr/* (53px) */
                 / 2fr 1fr 1fr 1fr 1fr;
                 grid-gap: ;
            padding:  32px 50px 26px;
        
        }



        #container_pa{
            max-width: 1200px;
            margin: 0 auto;
            border: none;
        }

        .foot_border{
            padding: 0;
        }

    

        
            

    
}




/*--------------------------------

【共通設定】　　★★★★★★★★★★★★★★

[pad大]---[ノートPC]---[デスクトップPC]

(grid・文字装飾・パディング・表示非表示)

--------------------------------*/

@media only screen 
  and (min-device-width: 900px) 
  and (max-device-width: 4000px) {
    /*　900px~最大サイズまでずっとこの設定*/
    /*　＝対応デバイス（ノートpc/ラップトップ/ipad pro縦横）*/

        
        /************************
        #header　　　　【確】
        ************************/

        /* headerのgrid */

        #hum_menu_pc{
            display: grid;/* blockの打ち消し */
            grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            align-items: center;/* ロゴの中身揃え */
        }

        .h_item01{
            grid-column: 1 / 10;
            grid-row: 1;
        }

        .h_item02{
            grid-column: 1 / 4;
            grid-row: 1;
        }

        #h_item03{
            grid-column: 4 / 5;
            grid-row: 1;
        }

        #h_item04{
            grid-column: 5 / 6;
            grid-row: 1;
        }

        #h_item05{
            grid-column: 6 / 7;
            grid-row: 1;
        }

        #h_item06{
            grid-column: 7 / 8;
            grid-row: 1;
        }

        #h_item07{
            grid-column: 8 / 9;
            grid-row: 1;
        }

        /* header背景や横幅の設定 */

        header {
            height: auto;
            /*　Headerの高さ調節*/
            background: #029242;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #029242, #a8ce51);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #029242, #a8ce51); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            /*　追従用の追記*/
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 100;
        }

        #logo_area {
            position: unset;/* positionの打ち消し */
            width: 100%;
        }

        /* headerの文字装飾 */

        #hum_menu_pc{
            color: white;
            font-size: 1.8rem;
            font-weight: 500;
        }

        #hum_menu_pc a{
            font-family: Avenir, Arial, Helvetica, sans-serif;
        }


         /*------------------------
        footer　　　　【確】
        ------------------------*/

        /* フッターの文字装飾 */

        .footcolor {
            background: #009844;
        }

        #copylight{
        padding: 16.5px 50px;
        }

        #copylight p {
        text-align: left;
        }


        /* footerのグリット */
           
        #container_foot {
        grid-template-columns: 280px 1fr 1fr 1fr;
        grid-template-rows: 57px 128px 55.6px 48px;
        gap: 30px;
        grid-template-areas: none;
        padding: 70px 50px;
    }

        /* グリットの中身の番号振り */

        /******* 
        1列目
        *******/

        /* logo */

        #f_item_01 {
        grid-column: 1;
        grid-row: 1;
        }
    
         /* tel */
    
        #f_item_02 {
        grid-column: 1;
        grid-row: 2 / 4;
        margin:0;
        }
    
         /* mail */
    
        #f_item_03 {
        grid-column: 1;
        grid-row: 4;
        }
        
    
        /******* 
        2列目
        *******/
    
        /* 個人情報・snsのフレックス */
    
        #f_item_04 {
        grid-column: 2 / 5;
        grid-row: 3;
        justify-content: flex-end;
        }
    
        /* アドレス */
    
        #f_item_05 {
            grid-column: 2 / 5;
            grid-row: 4;
            }
    
        /******* 
        PCのみ
        *******/    
    
    
        #f_pc_item_01{
            grid-column: 2 / 3;
            grid-row: 1;
            }
    
        /* サイトマップ文章 */
    
        #f_pc_item_01 p,
        #f_pc_item_02 p,
        #f_pc_item_03 p,
        #f_pc_item_04 p,
        #f_pc_item_05 p,
        #f_pc_item_06 p
        {
            padding: 16px 0 0 0;
            line-height: 1;
    
        }
    
        #f_pc_item_01,
        #f_pc_item_02,
        #f_pc_item_03,
        #f_item_05{
            padding: 0 0 0 20px;
        }
    
        #f_pc_item_04,
        #f_pc_item_05,
        #f_pc_item_06{
            padding: 49px 0 0 20px;
        }
    
        #f_pc_item_04 p{
            line-height: 2.2rem;
        }
    
    
        .flex_box{
            flex-wrap: nowrap;
        }
    
        #f_item01{
            order: 2;
            flex-basis: 20%;
            margin: 0 15px 0 0;
        }
    
        #f_item02{
            order: 3;
            flex-basis: 20%;
        }
    
        #f_item03{
            order: 1;
            padding: 0 0 0 20px;
            font-size: 1.5rem;
            margin-right: auto;
        }
    
    
        .s_map_h4{
            border-bottom: 1px solid black;
            padding: 0 0 11px 0;
            line-height: 1;
        }


        /* パートナー企業 */

        #f_pa_item_01 {
            padding: 0 0 0 0;
        }

        #container_pa{
            align-items: center;
        }
        

        #container_pa {
            grid-template:
                "title logo01 logo02 logo03 logo04" 1fr/* (53px) */
                 / 330px 1fr 1fr 1fr 1fr;
                 grid-gap: ;
            padding:  32px 50px 26px;
        
        }



        #container_pa{
            max-width: 1200px;
            margin: 0 auto;
            border: none;
        }

        .foot_border{
            padding: 0;
        }

    
}



/*--------------------------------

【独自設定】

PCの設定

--------------------------------*/

@media screen and (min-width:1025px) {
    /*　画面サイズが1025pxからはここを読み込む　*/

    header,
    footer,
    .content_wrap {
        max-width: 2000px;
        /*　サイドを広げるための擬似的な設定*/
    }

    /*　ネガティブマージンの失敗成功...　*/

    .content_wrap{
        margin-top: 112px;
    }



    

}


/*--------------------------------

【独自設定】

PADの設定

--------------------------------*/

/* 中間の幅(900-1024) */
@media only screen 
  and (min-device-width: 900px) 
  and (max-device-width: 1024px) {


    /* 以下PCの設定と同じ */

    header,
    footer,
    .content_wrap {
        max-width: 2000px;
        /*　サイドを広げるための擬似的な設定*/
    }

    .content_wrap{
        margin-top: 112px;
    }
    
    
 
}