/**/

/* 
・flex コード　レイアウト調整がレスポンシブ時簡易
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet 

・メディアクエリの考え方
PCを先に組んでおいて、SP用のクエリを上書きしていく。
ブレイクポイント768px（iPadの立てレイアウト） 以下はSP
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries
*/

/*デフォルト CSS*/

@charset "UTF-8";
html{

    font-size: 62.5%;
}

body{
    color: #333;
    font-size: 1.8rem;
    font-family:"hiragino Kaku gothic" "Meiryo";
    
}

a:link, a:visited, a:hover, a:active{
    color: #1f1c1c;
    text-decoration: none;
}




.wrapper{
    margin-top: 0px;
    width: 1200px;
    margin: 0px auto 40px;
}


.header{
    position: fixed; 
    top: 0;
    width: 100%;
    padding: 10px 0px 0px;
    background-color:white;  
    margin-top: 0px;
}


.logo{
    margin: 0px auto 0px;
    margin-left: 0px;
    font-size: 5.6rem;
    font-weight: normal;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* background-color: bisque; */
}


.global-nav {
    margin-top: 0px ;
    padding: 0px 0px 0px;
    text-align: left;/*中央寄せ*/
    background-color:rgb(206, 206, 206); 
}

.global-nav .nav-item {
    display: inline-block;
    margin:0px 30px 2px 6px ;
    font-size: 2rem;
    background-color: blue;

    background: 
    linear-gradient(currentColor 0 0) 
    0 100% /var(--d, 0) 3px 
  no-repeat;
    transition:0.5s;
}

.nav-item:hover {
   --d: 80%;
}



.works{
    color: black;
    margin: 180px 1px 55px 1px;
    /* background-color:bisque; */
    font-size: 4rem;
}

.works-sample img{
    display: block; 
    /* display block 一行まるごとその要素で埋める 基本縦積みになる */
}

.works-sample{
    display: flex; 
    /* 基本横並びになる。 */
    justify-content: space-between;
    margin-bottom: 16px;
}
.img-contaner{
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    width:540px;
    height: auto;
    object-fit: cover; 
}

.img-contaner-cl{
    font-size: 1.6rem;
    margin-top:0px;
    padding-top: 0px;
    /* height: 40px; */
    font-family:sans-serif;
    line-height:1.8;
    color: #1f1c1c;;
}








.main{
    display: bloack;
    float: left;
    width:660px;
}


.border{
    border: 2px solid blue;
    margin-bottom: 20px;
}



.left{
    float: left;
    width: 400px;
    height: 280px;
    opacity:60%;
    background-color: rgb(197, 228, 26);
}




.right{
    float: right;
    width: 200px;
    height: 200px;
    opacity:100%;
    background-color:red;
}

.bottom{
    float: left;
    width: 350px;
    height: 30px;
    opacity:100%;
    background-color:green;
}


.clearfix::after{
    content: '';
    display:block;
    clear:both;
}


.clear{
    clear: both;
    height: 10px;
    background: lightgreen;

    }


.text{
    margin: 100PX auto 100px;
    color: brown;

}