@charset "UTF-8";

/*指定したタグの余白をなくす*/
body,header,h1,h2,h3,p,ul,footer{margin: 0;
	padding: 0;}
body{font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;}
	#wrapper{margin: 0 auto;
		width: 100%;
		/*padding: 0 0px 0px 0;*/
		background-color:#fff;
		/* border:1px solid #f0ebeb; */
		/*border-top: none;
		border-bottom: none;*/
        overflow: hidden;
       /*  background-image:url(../image/bg.gif);*/
}


/*header*/
header{width:100%;
    height:106px;
    /*overflow:hidden;*/
	margin: 0px 0 1px 0px;
	padding:10px;
	background-color:#BABABA;/*ヘッダーカラー*/
    z-index: 98;/*画面の重なり上層にする様に*/
    position: fixed; /* ヘッダーを固定(これが重要) */
    top: 0; /* 固定する位置 */
    left: 0; /* 固定する位置 */
    right: 0;  /* 固定する位置 */}

/*header{ width: calc(100% - 20px);
		overflow:hidden;
}*/

/* ハンバーガーメニュー */
/*ヘッダーまわりはご自由に*/
/* header {
  padding:10px;
  background: skyblue;} */

/*#nav-drawer {position: relative;}*/

/*チェックボックス等は非表示に*/
.nav-unshown {display:none;}

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 2px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 2px;
    background: #fff;/*ハンバーガー三本線*/
    display: block;
    content: '';
    cursor: pointer;
    margin-top:10px;}
    
#nav-open span:before {
    bottom: -10px;
    /*margin-left: 4px;*/}
    
#nav-open span:after {bottom: 9px;}

/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;}


/*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 90%;/*右側に隙間を作る*/
    max-width: 330px;/*最大幅*/
    height: 400%;
    background: #fff;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    transform: translateX(-105%);}/*左に隠しておく*/

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);}


/*  画面480px以上では隠れる*/
@media screen and (min-width:501px) {
  #nav-open {display:none;}
}


/*ハンバーガーメニューのボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 200px;/*最大幅*/}

/*ラベル*/
.accbox label {
    display: block;
    margin: 0.5px 0;
    padding : 13px 12px;
    color:#888;
    font-size: 12px;
    font-weight:lighter;
    background: #fff;
    cursor :pointer;
    transition: all 0.5s;
    /*border-bottom:#BABABA solid 1px;*/}

label a{text-decoration: none;
    color:#888;}


/*アイコンを表示*/
/*.accbox label:before {
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
    font-weight:600;}*/


/*ラベルホバー時*/
.accbox label:hover {opacity: 0.5;
    /* background :#ffe9a9; */}

/*チェックは隠す*/
.accbox input {display: none;}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;}

/*クリックで中身表示*/
/*
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff;
    opacity: 1;}
*/

/*.accbox .accshow p {
    margin: 15px 10px}*/

/*アイコンを入れ替える*/
/*
.cssacc:checked + label:before {
    content: '\f078';}
*/


/* フル画面css */
header .but{margin: 5px 0 0px 10px;
            color: #fff;}

/*大きいタイトル*/
header h1 .name{font-family: 'Pathway Gothic One', sans-serif;/*h1のフォント*/
    margin: 10px 0 0 0px;
    padding: 5px;
    font-size: 42px;
    font-weight: lighter;
    color: white;
    float: left;}

/* タイトルのカラー白 */
.name a{color:#fff;
    text-decoration:none;}

/*小さいタイトル*/
header h1 .agence{font-family: 'Pathway Gothic One', sans-serif;
    margin: 35px 40px 0px 5px;
    font-size: 19px;
    font-weight: lighter;/*フォントの太さ細く*/
    color:#fff;
    float: left; }

/*nav*/
nav{margin:45px 0px 0px 0px;
    padding: 0px;}

nav ul{overflow: hidden;
    font-size:10px;
    font-weight:100;/*フォントの太さ*/
    list-style: none;
    font-weight: bold;}

nav li{display:inline-block;
    float:left;
    border-left:  1px solid #f0ebeb;
    transition: .3s;}

/* ナビの一番右のライン消す */
nav li:last-child{border-right:none;}

nav li a {padding: 10px;/*文字周りのパディング  */
    text-align: center;
    color: #fff;
    text-decoration: none;
    display: block;
    transition:.5 ease;}

nav li a:hover{
    border-bottom: solid 1px #fff;
    margin:0;}

/*ファイナンスに居るよの白のアンダーライン*/
.nav4{border-bottom: solid 1px #fff;
    margin:0;}

.nav4 a:hover{border-bottom:none;
            margin:0;}

/*お問い合わせ*/
/*envelopeアイコン  */
.my-big {font-size: 1.3em;}

/*お問い合わせ文字*/
header p a{display: block;
    padding: 1px 2px 0px 2px;
    margin: -90px 250px 0px 0px;
    font-size: 15px;   
    float: right;
    color: white;
    text-decoration: none;
    transition: .3s;}
    
header p a:hover{
    /*border-radius:2px;
    background-color: white;
    color:#BABABA;*/}

 /*仏語*/
header .langue a{display: block;
    font-size: 13px; 
    margin: -99px 15px 30px 0px;
    padding: 0 -1px 5px 0px;
    float: right;
    text-align: center;
    color:white;
    text-decoration: none;
    background-color:#BABABA;
    /*border: solid 2px white;*/
    /*border-radius:4px;*/}
    
header .langue a:hover{border-left:solid 1px #fff;/*color: #BABABA;
    background-color:white;*/
    }

header .langue-e a{display: block;
    font-size: 13px; 
     margin: -98px 75px 30px 0px;
    padding: 0 1px 0px 2px;
    float: right;
    text-align: center;
    color:white;
    text-decoration: none;
    background-color:#BABABA;
    /*border-radius:4px;*/}
header .langue-e a:hover{border-left:solid 1px #fff;/*color: #BABABA;
    background-color:white;*/
    }

/* 所在地 */
header .address{
    float: right;
    margin: -50px 25px 5px 0;
    display: block;
    font-weight: lighter;/*フォントの太さ細く*/
    font-size: 15px;
    color:#fff;}

/* 電話番号 */
 header .phone{float: right;
    margin: -25px 25px 5px 0;
    display: block;
    font-size: 15px;
    color:#fff;}


/* フェイスブックアイコン */
.fa-facebook{/*float: right;
    margin: -30px 80px 5px 0;
    color: white;
    font-size: 1.4em;*/
    display: none;}
    
/*インスタグラムアイコン  */
.fa-instagram{/*float: right;
    margin: -30px 58px 5px 0;
    color: white;
    font-size: 1.4em;*/
    display: none;}

/* レスポンシブcss*/

/* 1264px以下の時 */
@media(max-width: 1264px) and (min-width: 961px) {

body{
    margin: 0;
    padding: 0;
    background-color: grey;} /* 作りやすい様に背景色 */

#wrapper{margin:0 auto;
    overflow: hidden;
    width: 100%; }

header{width: 100%;}
    /*仏語*/
    /*  header .langue a{font-size: 15px;
      float: left;
      margin: -25px 0px 0 800px;
    }*/

    /*お問い合わせ*/
    /*envelopeアイコン  */
    /*.my-big {
      font-size: 1em;
    }*/
    /*お問い合わせ文字*/
     /* header p a{float: left;
        margin:  -26px -800px 0 650px;
      font-size: 17px;

    }*/

    /* フェイスブックアイコン */
    /* .fa-facebook{float: left;
        margin: -97px 0px 5px 722px;
        color: white;
        font-size: 1.4em;}*/
        
    /*インスタグラムアイコン  */
    /*.fa-instagram{float: left;
        margin: -97px 0px 5px 700px;
        color: white;
        font-size: 1.4em;}*/
        
    /*  所在地*/
    /*header .address{float: left;
        margin: -97px 0px 0px 180px;
        color: white;}*/
        
    /* 電話番号 */
    /*header .phone{float: left;
        margin: -70px 0px 0px 180px;
        color: white;}*/
}


/* メイン */

/* 960px以下の時 */
@media(max-width: 960px){

  body{
    margin: 0;
    padding: 0;}

  #wrapper{margin:0 auto;
    width: 100%; }

    header{height:127px;
			width: 100%;}

    header .but{margin: 5px 0 0px 10px;
                color: #fff;}
                
    header h1 .name{margin:-10px 0 0 0px;
                    font-size: 40px;}
                    
    header h1 .agence{margin:10px 0 0 0px;
                    padding-left: 5px;
                    font-size:20px;}

/*nav*/
    nav{margin:48px 0px 0px -8px;
      padding:0;}

    nav li{display: flex;/*囲んでいる要素をそのまま左から右へ流す形で設定される*/
      	display: -ms-flex;
    	width:16.4%;
      	list-style-type:none;
      	font-size:11px;
      	margin:0;
      	padding:0;}

     nav li{height: 54px;}/*ナビのラインの高さ*/

/* #container{overflow:hidden;
						margin: 0 auto;
						width: 100%;} */


/*  所在地*/
header .address{display: none;}

header .phone{display: none;}



/*お問い合わせ*/
/* envelopeアイコン  */
.my-big {font-size: 1.1em;}
    
/*お問い合わせ文字*/
header p a{/*float: right;*/
    margin:  -80px 30px 0px 0px;
    font-size: 17px;}
    


/* フェイスブックアイコン */
/*header .fa-facebook{display: none;}*/

/*インスタグラムアイコン  */
/*header .fa-instagram{display: none;}*/

/*.topimg{margin: 50px 0px 0 0px}*/

}


/*760px以下の時  */
  @media(max-width: 760px)and (min-width: 501px) {}

/*500px以下の時  */
  @media(max-width: 500px){

    body{
        margin: 0;
        padding: 0;
        background-color: grey; /* 作りやすい様に背景色 */}

    #wrapper{margin:0 auto;
        width: 100%; }

    /*header{height:90px;}*/

    header{ width: calc(100% - 20px);
        /*overflow:hidden;*/
        }

    header{height:105px;
			width: 100%;}
            
    header .but{float:right;
        font-size: 13px;
        color: #fff;
        padding-right: 10px;
        margin:-19px 15px 0 5px;}

    header h1 .name{margin:20px 0 0 0px;
        font-size: 40px;}
                  
    header h1 .agence{margin:47px 0 0 0px;
        padding-left: 5px;
        font-size:14px;}

    nav{display:none;}
    
    header p a{display:none;}
    
      /*言語　仏語*/
header .langue a{display: block;
    font-size: 13px; 
    margin: 30px 5px 30px 0px;
    }
    
/*言語　英語*/
header .langue-e a{display: block;
    font-size: 13px; 
    margin: 5px -45px 30px 0px;
  }
    
    
    .fa-facebook{display: none;}
    
    /*インスタグラムアイコン*/
    .fa-instagram{display: none;}

    /*所在地*/
    header .address{display: none;}
    
    /* 電話番号 */
    header .phone{display: none;}

    /* #container{width:100%;} */
}
/* スマホ用500px終わりのカッコ*/
/*320px以下の時  */
  @media(max-width: 320px){
/*言語　仏語*/
header .langue a{display: block;
    font-size: 13px; 
    margin: 8px 1px 30px 0px;
  }
    

/*言語　英語*/
header .langue-e a{display: block;
    font-size: 13px; 
    margin: -15px 7px 30px 0px;
   }
      

}