@charset "utf-8";



/*　-----------共通ページ-----------*/

video{
  margin-bottom: 20px;
}



h1{
font-weight: 300;
}


header{
padding:10px;
position: fixed;            /* ヘッダーの固定 */
top: 0px;                   /* 位置(上0px) */
width: 100%;                /* 横幅100%　*/
height: 70px;              /* 縦幅140px */
background-color: #fff;
z-index: 999;/*最前面に*/
}
.whole{
  width:100%;
  margin:auto;
  max-width: 1280px;
}


.clear { clear:both;}

.link_tag{
 margin-top: 60px;
 font-size: 125%;
 margin-left: 100px;
 line-height: 2.5em;
 letter-spacing:0.05em;
}

.title{
 float:left;
 width: 150px;
 margin-left: 80px;
 margin-top: 35px;
 font-weight: 300;
}

.title p{
   font-size: 103%;
     letter-spacing:0.05em;
}

p{
  font-weight: 300;
}

.kara{
 margin-top: 150px;
}

.kara_2{
 margin-top: 30px;
}

.kara_3{
 margin-top: 10px;
}

.nav0{
float:left;
width: 250px;
display: flex;
margin-left: 80px;
padding-top: 35px;
font-size: 130%;
letter-spacing:0.05em;

}

a{
    font-weight: 300;
}

.navItem{
    font-weight: 300;
  margin-right: 40px;
}


.kara_bottom{
 margin-top: 50px;
}


/*　-----------共通ページ終わり-----------*/





/*-----------フェード-----------*/

.feed{
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*-----------フェード終わり-----------*/


/*　-----------indexページ-----------*/

.itemlist {
max-width: 1120px;
margin: 0 auto;
letter-spacing: -.5em;
font-size: 120%;
}

.itemlist li {
display: inline-block;
width: 30%;
padding: 10px;
margin-bottom: 20px;
letter-spacing: 0;
vertical-align: top;
}
.itemlist dt{
  margin-top: 5px;
line-height: 1.5em;
letter-spacing:0.05em;
}

.itemlist dl { margin: 0; }
.itemlist dl { text-align: right; }
.itemlist dt, .itemlist .txt { text-align: left; }
.itemlist dt { font-size: .9em; font-weight: 300; }
.itemlist img { width: 100%; height: auto; }


/*　-----------indexページ終わり-----------*/

/*　-----------designページ-----------*/


.design_text{
  max-width: 1120px;
  margin: 0 auto;
  width: 97%;    /* テキストの幅 */
}

.design_text h1{ font-size: 100%; margin-top: 20px;letter-spacing: 0.05em;}
.design_text p{ margin-bottom: 0px; font-size: 95%; line-height:1.8; letter-spacing: 0.05em;}



/*　-----------designページ終わり-----------*/
/*　-----------aboutページ-----------*/

 /*aboutページの背景色のみの変更 */
.about_color{
padding:10px;
position: fixed;            /* ヘッダーの固定 */
top: 0px;                   /* 位置(上0px) */
width: 100%;                /* 横幅100%　*/
height: 70px;              /* 縦幅140px */
z-index: 999;/*最前面に*/
}



.profile1{
 width: 80%;
 margin-left:35px;

}


.profile12 p {
 margin-bottom: 60px;
font-size: 130%;
}

.adress{
letter-spacing:0.05em;
font-weight: 300;
margin-top: 60px;
margin-bottom: 200px;
font-size: 80%;
padding-bottom:2px;
}



  /*　-----------aboutページ終わり-----------*/




  /*　-----------ハンバーガーメニュー-----------*/




#nav-drawer {
  margin-top: 13px;
  margin-right: 25px;
  float: right;
  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: 1px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #231815;
  display: block;
  content: '';
  cursor: pointer;
  }
#nav-open span:before {
  bottom: -8px;
  }
#nav-open span:after {
  bottom: -16px;
  }

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

  /*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
    max-width: 300px;/*最大幅（調整してください）*/
    height: 100%;
    background: #fff;/*背景色*/
    transition: .6s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
  }

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

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示（右へスライド）*/
  }



  /*　-----------ハンバーガーメニュ終わりー-----------*/


@media screen and (min-width:1280px) {
        .whole{width:96%;max-width: 1280px;margin-left: 70px;}
        .itemlist li{width:100%;margin: auto;}

    }


/*パソコン全画面で見た時*/
  @media screen and (min-width:700px) {

  .whole{width:100%;max-width: 1120px;}
  .itemlist li { width: 30%;margin: auto;}
  .itemlist{ margin-left: 2%;}
  footer{margin-left:2.8%;}
  .design_text p{margin-left: 1.5%;}
  .design_text h1{margin-left: 1.5%;}
  .title{margin-left: 2%;font-size: 130%;text-align:left;letter-spacing:0.05em; margin-top:35px}
}






  @media screen and (max-width:700px) {
    .itemlist li { width: 100%;}
    .itemlist{text-align: center;}
    .design{width:100%;margin:0 auto;padding:0% 0% 0% 0%;}
    .title{margin-left: 3%;font-size: 125%;text-align:left;letter-spacing:0.05em; margin-top:10px}
    nav{display:none;}
    footer{letter-spacing:0.05em;width: 270px;margin-left: 4%;margin-top: 60px;font-size: 80%;}
    .design_text { width: 95%;}
   .design_text p{margin-left: 2.5%;}
   .design_text h1{margin-left: 2.5%;}

}



@media screen and (min-width:700px) {
  #nav-open {display:none;}
}



  @media screen and (max-width: 700px) {
    video{margin-left: 3%;
    }
   .itemlist li{width: 90%;margin: auto;}
}