@charset "UTF-8";



body {margin: 0;
     	font-family: '????',
        'Hiragino kaku Gothic Pro',
        sans-serif;
}

/*==== PC大きい画面の設定==============*/

@media(min-width: 768px){

    header {
        position: absolute;
        top: 0;
        left: 0;
        z-index:100;
        width: 100%;
        background-color: rgba(255,255,255,1.0);
        
    }
        
    /*ヘッダーを画面上部に固定*/
        
    .head-fixed{
        position: fixed;
    }
    
 
    header{
        height: 60px;
        padding-top:15px;
    }
    
    
    header .container{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        
    }
    
/* ヘッダーA: サイト名 */
.headA{
    display: inline-block;
    line-height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    /*background-color: #2c3850;*/
    color: #65646E;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-decoration: none;
    
}  
    
    
/* ヘッダーB: ナビケーションメニュー*/
    
.headB ul{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.headB a{
    display: block;
    padding: 16px;
    color: #65646E;
    font-size: 16px;
    text-decoration: none;
}

.headB a:hover{
    background-color: rgba(0,0,0,0.4);
    color: #fff;  
    
}  
    
 .headC{
        display: none;
    }
    
  .headB{
        display: block !important;
    }
     
    
    
  .conA{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70vh;
        min-height: 300px;
        background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../img/sub_img01_01.jpg);
        background-position: center;
        background-size: cover;
        color:#fff;
        text-align:center;
    }
    
    .conA h2{
        font-size: 50px;
        font-family: 'Montserrat', sans-serif;
        
    }
   
    .conA p{
        font-size: 26px;
    }

main{
    width: auto;
    height: auto;
}
    
/*フッター*/
footer{
    margin-top: 40px;
    height: 220px;
    padding-top: 30px;
    color: #fff;
    background-color: #ccc;
}
    
     
    .footA h2{
        font-size: 26px;
        color: #fff;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
    }
    .footC p{
        font-size: 18px;
        color: #fff;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
    }
    
 
}


/*====== モバイル画面の設定 ============-*/

@media (max-width:767px){

/*ヘッダー*/
header {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    background-color: rgba(255,255,255,1.0);
}



/*ヘッダーA：サイト名*/
.headA{
    display: inline-block;
    line-height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    /*background-color: #2c3850;*/
    color: #65646E;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    text-decoration: none;
    
}

/*ヘッダーB: ナビケーションメニュー*/
.headB ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.headB a{
    display: block;
    padding: 16px;
    color: #65646E;
    font-size: 16px;
    text-decoration: none;
}

.headB a:hover{
    background-color: rgba(0,0,0,0.3);
    color: #fff;
}


/*ヘッダーナビゲーションを画面上部に固定*/
 .head-fixed{
    position: fixed;
}

    
    header .container-small{ 
         display: flex;
         align-items: center;
         justify-content :space-between;
    }

    .headC{
        margin-right: 10px;
        margin-top: 5px;
        padding:0;
        border:none;
        outline: none;
        background: none;
        font-size: 30px;
        color: #65646E;
       /*opacity: 0.5;*/
        cursor: :pointer;
    }
    
     .headC p{
        font-size: 15px;
        margin-top: 2px;
        margin-bottom: 2px
    }
    
    .headC:hover{
        opacity: 0.3;
    }
    
    .headB{
        display: none;
    }


/*コンテンツA:ヒーローイメージ*/
.conA{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 45vh;
    min-height: 300px;
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../img/sub_img01.jpg);
    background-position: center;
    background-size: cover;
    color: #fff;
   /* color: var(--text-bright-color);*/
    text-align: center;
        
}

.conA h2{
    margin-top: 0px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9vw;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
}

.conA p{
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 18px;
}

main{
    width: auto;
    height: auto;
}


/*フッター*/
    footer{
        height: 200px;
        color: #fff;
        background:#9d9f99; /*url(../img/footer_bg.jpg);*/
        border-top: 1px solid #ccc;
        text-align: center;
    }


    footer .container{
        padding: 40px 20px;
        color: #fff;
        height: 100px;
    }
    
    
    .footA h2{
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    letter-spacing: 0.2em;
    }    
    
    .footC p{
        font-size: 16px;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        margin-bottom: 20px;
    }

}