@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');

:root {
  --primary: #000000;
  --dark: #b5b5b590;
  --body: #000000;
  --box-shadow:0 8px 22px rgba(0, 0, 0, 0.2);
  --back:white;
  --amazon:orange;

}

/*font-family:'Sora',sans-serif;*/
body{
  font-family:"Sawarabi Gothic",sans-serif;
  line-height: 1.3;
  color: var(--body);
  background-color: var(--back);
}

h1,
h2,
h3,
h4,
h5,
h6,
display-4/* これはフォント*/
{
  color: var(--dark);
  font-weight: 700;
}

img{
  width: 100%;
}

a
{
  color: var(--body);
  text-decoration: none;
}

/* section間の空白設定*/
section{
  padding-top:60px;
  padding-bottom: 60px;
}


/* その１*/
/* navbar関連*/
.navbar .container {
  display: flex;
  align-items: center;
}

.navbar-brand img{
  height: 80px;
}

.nav-link{
  color:black;
  font-size: 14px;
  font-weight: 700;
  padding-top: 10px;
}

.navbar-nav {
  display: flex;
  align-items: center;
}

.online-store .create{
  padding-top: 30px;
}


/*  メインヴィジュアル レスポンシブ*/ 

@media screen and (min-width: 1050px) {
  

  .navbar .container {
    height: 100px; 
    width: 1050px;
  }

  /* メインビジュアルサイズ調整*/ 
  .carousel-inner{
    height: calc(100vh - 120px);
    max-width: 1050px;
    margin: 0 auto;
  }

}


@media screen and (max-width: 1000px) {
  .nihoncha .nihoncha-pic{
    order:2;
  }

  .nihoncha .create{
    order:1;
  }

}

/*  メインヴィジュアル レスポンシブ*/ 
/*  Part1*/ 
@media screen and (max-width: 760px) {
 
  .navbar-brand{
    display: block;
    justify-content: center;
  }

  .navbar-brand img{
    height: 40px;
  }

  .navbar{
  padding-top: 0rem;
  padding-bottom: 0rem;
  }

  section{
    padding-top:40px;
    padding-bottom: 40px;
  }

  .online-store .create{
    padding-top: 0;
  }

}

/*  Part2 */ 
@media screen and (max-width: 420px) {
  .navbar-brand img{
    height: auto;
    width: 200px;
  }
}




/*その２：ボタン*/ 
.btn{
  display: inline-block;
  color:var(--body);
  background: #fff; 
  font-size: 12px;
  border: 1px solid var(--body);
  padding: 10px 30px; /* 上下の余白、左右の余白 */
  text-decoration: none; /* デフォルトで入るリンクの下線を消す */
  border-radius: 20px; /* 角を丸くする */
}

/* amazonボタン*/
.online-store .btn{
  background: var(--amazon);
  color: #fff;
  border:none;
}

/* hover時 */
.btn:hover{
  opacity: 0.7;
  background-color: var(--body);/* ホバー時の背景色 */
  color:var(--back); /* ホバー時のテキスト色 */
  border-color: /* ホバー時のボーダー色 */
}

/*  hover時 amazonボタン*/
.online-store .btn:hover{
  background:orangered;
}


/* news */
#news dl{
  display: flex;
  flex-wrap: wrap;
}

#news dt {
  width: 20%;
  padding-bottom: 5px;
}

#news dd{
  width: 80%;
  padding-bottom:5px;
}

#news dt, dd {
  line-height: 2;
}

/* brand部分の文字フォント */
.brand .create-text{
  font-family:"Sawarabi Gothic", Arial, sans-serif;
}

.taiwancha .create-text{
  font-family:"Sawarabi Gothic",sans-serif;
}

/* picture */
.brand-pic{
  background-image:url(../img/pro4.jpg);
  background-position:center center;
  background-size:cover ;
  height: 50vh;
}

.nihoncha-pic{
  background-image:url(../img/pro7.jpg);
  background-position:center center;
  background-size:cover ;
  height: 50vh;
}

.taiwancha-pic{
  background-image:url(../img/pro.jpg);
  background-position:center center;
  background-size:cover ;
  height: 50vh;
}

/* 調整*/
.store-pic img{
  width: 80%;
}


/*  メインヴィジュアル レスポンシブ*/ 
/*  　*/ 
@media screen and (max-width: 760px) {
  .brand-pic{
    height: 300px;
  }
  
  .nihoncha-pic{
    height: 300px;
  }
  
  .taiwancha-pic{
    height: 300px;
  }


}




/* blog部分で使ってる*/
.card-effect{
  box-shadow: var(--box-shadow);
  background-color: #fff;
  padding: 25px;
  transition: all 0.35s ease;
}

.card-effect:hover{
  box-shadow:none;
  transform:translateY(5px);
}






/* footer */
.footer-top{
  background-color: var(--dark);
  padding: 90px;
  padding-bottom: 90px;
}

.footer-top a{
  color:var(--body);
}

.footer-top a:hover{
  color: #fff;
}



/* 別ページ */
/* company */
#company dl{
  display: flex;
  flex-wrap: wrap;
}

#company dt {
  width: 20%;
}

#company dd{
  width: 80%;
  
}

#company dt, dd {
  padding-bottom: 15px;
  line-height: 2;
}

/* 別ページ */
/* taiwancha */
.store-pic img{
  width: 80%;
}

.online-store .store-pic{
  padding-top: 30px;
}

@media screen and (max-width: 900px) {

.store-pic img{
    width: 50%;
  }

  .online-store .store-pic{
    padding-top: 0px;
  }


 } 



/* 別ページ */
/* nihoncha */
#nihoncha img{
  width:300px;
}


/* 別ページ */
/* design */


#product-design .porto-pic{
  display: flex;
}

#product-design .porto-pic img{
  width: auto;
  height: 250px;
  padding:0 auto;
  border: solid 1px #777777;
}


#novelty-design .porto-pic{
  display: flex; 
  margin-bottom: 20px;
}

#novelty-design .porto-pic img{
  width: auto;
  height: 250px;
}

#illustration-design .porto-pic{
  display: flex;
}

#illustration-design .porto-pic img{
  width: auto;
  padding:0 auto;
  height: 400px;
  border: solid 1px #777777;
}


@media screen and (max-width: 992px) {
  #product-design .porto-pic img{
    height: 200px;
  }
   }

@media screen and (max-width: 768px) {
  #product-design .porto-pic img{
    height: 150px;
    }
  #novelty-design .porto-pic img{
    width: 140px;
    height: auto;
    }
     }

@media screen and (max-width: 576px) {
   #product-design .porto-pic img{
        height: auto;
        width: 50%;
        margin-top: 20px;
        margin-bottom: 20px;
        }  
   #novelty-design .porto-pic img{
        width: 110px;
        height: auto;
        }

   #illustration-design .porto-pic img{
          height: 300px;
        }
    }
  


/*==================================================
スライダーカードのcss
===================================*/
.slider-card {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
}

/* 大事 */
.card {
  width:20vw;/*スライダー内の画像を20vwにしてレスポンシブ化*/
  height:auto;/* レスポンシブで細かく設定するしかない？ */
  border: none;/*カード線を消す*/
}


/* card内の画像が左寄せになってる→解決 */
/* cardの線が邪魔。画像だけでいいのでは？→解決 */
.card img {
  width:100%;/*100%だと隙間なし。90%だと左寄せになる*/
  height:auto;
  padding-left: 5%;
  padding-right: 5%;
}

/* illustration時 */
#sns-design .card{
  width:20vw;/*スライダー内の画像を10vwにしてレスポンシブ化*/
  height:;/*未解決。しおり高さ*/
  display: flex;
}

#sns-design .card img{
  width: ;
  height:;/*未解決。栞悩み中。。。カード不要？*/
  padding: auto 0;
}



.slider-card .card-effect {
  width:;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:;
}

/*ドットナビゲーションのボタン不要*/

.slick-dots li {
  display:none;
}


.director-photo img{
  width:100px;

}



/* 別ページ */
/* test */
#top img{
  width:;
}

#top{
  margin-top: 0;
  padding-top: 0;
  margin-bottom:0 ;
  padding-bottom: 0;
}

.view{
  display: flex;
  justify-content: center;
  align-items: center;
}

#double{
  margin-top:0;
  padding-top: 5px;
}

.double-one img{
  width: 100%;
  height: 35vh;

}

.double-two img{
  width: 100%;
  height: 35vh;
}