/*
 Theme Name: tadashikitamura portfolio
 Theme URI: https://www.food.tadashikitamura.com
 Description:ポートフォリオ用webサイト
 Version: 1.0.0
 Author: tadashi kitamura
 Author URI: https://www.tadashikitamura.com
 */

/*================
 PC用のスタイル
=================*/

 /* PC、スマホ共通スタイル */

 @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
 body{
  font-family:  "M PLUS 1p";
 }

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

  body {
    max-width: 1080px;
    min-width: 960px;
    margin: 0 auto 0 auto;
    background-color: #f5f4e9;
  }

  ul {
    list-style: none;
    padding-left: 0;
  }

  li{
    list-style:none;
    padding-left: 0; 
  }

  a {
    text-decoration: none;
    color: black;
  }
  
  a:hover {
    text-decoration: underline;
  }

  /* ロゴとヘッダー */
  .headerall {
    position: relative;
  }

  .logonav{
    display: flex;
    width: 100%;
  }

  .logo img{
    width: 60%;
  }

  .logo {
    padding: 0;
    margin: 0;
    font-weight: bold;
    /* nav重なり */
    z-index: 2;
  }

  .logonav{
    width: 100%;
  }

  .navdivall{
    width: 100%;
    /* nav重なり */
    z-index: 10;
  }

  .navdivall2 a{
    display: block;
  }

  .navdivall2 {
    box-sizing: border-box;
    position: fixed;
     padding-left: 650px;
  }

  /* トップイメージ画像 */

.topimg img{
  width: 100%;
}

.topimg {
  bottom: 100px;
  z-index: 1;
}

  
 .topcomment12 {
  width: auto;
 }

.topcommentleft {
  writing-mode: vertical-lr;
  position: absolute;
   top:15%;
   left: 13%;
  z-index: 2;
}

.topcommentleft p{
  font-size: 3rem;
  writing-mode: vertical-rl;
}

.topcommentright {
  writing-mode: vertical-rl;
   position: absolute;
   top:15%;
   right: 14%;
   z-index: 2;
}

.topcommentright p{
  font-size: 3rem;
  writing-mode: vertical-rl;
}

  /* about */

  .aboutspace {
    width: 100%;
    margin-top: 100px;
  }

   .aboutsection{
    display: flex;
    /* flex-flow: column; */
   }
  

  .aboutcomment{
    word-break: break-all;
    font-weight: bold;
  }

  .aboutcomment2 {
    margin-top: 300px;
    word-break: break-all;
    font-weight: bold;
  }

  .loopall {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 900px;
  }
 
  .loop_wrap {
    width: 50%;
    height: auto;
    text-align: right;
    overflow: hidden;
    font-weight: bold;
    transform-box: view-box;
  }

  .slider{
  width: 100%;
  padding: 0;
  margin: 0;
}


 .slider img{
width:90%;
height: 300px;
margin-top: 20px;
margin-left: 40px;
}


  
  /* ラインアップ */
  
.lineupall {
  background-color: white;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 0;
  font-weight: bold;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
}

.lineupscreendiv{
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-color: white;
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 1;
}

.lineupcomment{
width: 100%;
}

.lineupleft{
  font-weight: bold;
  width: 100%;
  text-align: center;
  z-index: 2;
}

.lineupr{
  word-break: break-all;
   text-align: center;
   margin-top: 6%;
   font-weight: bold;
  z-index: 2;
}

.lineuplr{
  display: flex;
}

/* 文字スクロール　ラインアップ */
.lineupscroll {
width: 100%;
overflow:hidden;
height: 30%;
font-weight: bold;
background-color: white;
}

.lineupscrollp {
font-size: 3000%;
display : inline-block;
white-space : nowrap;
animation : text_scroll 25s linear infinite;
padding-left: 100%;
margin-top: 0%;
padding-top: 0%;
font-weight: bold;
background-color: white;
margin-bottom: 0;
}


@keyframes text_scroll{
 0% { transform: translateX(0)}
 100% { transform: translateX(-100%)}
}

/* スクロール　画像 */

.scrollall{
  position:relative;
  z-index: 3;
}

.imgscroll {
  /* widht85%にすると横幅ピッタリ 親要素にrelativeを指定すると100%でピッタリになった*/
width: 100%;
height: auto;
overflow: hidden;
z-index: 4;
position: absolute;
top:35%;
font-weight: bold;
}

.imgscroll img{
width: 200px;
height: 200px;
margin-left: 100px;
font-weight: bold;
}

.imgscroll ul {
  display: flex;
  height: 200px;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-left: 100%;
  position: relative;
}
  
.imgscroll li {
  margin-bottom: 0;
  padding-bottom: 0;
  position: absolute;
  left:0;
}
 

@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-1000%);
  }
}

.loop3 {
  animation: loop3 30s linear infinite;
}

.loop4 {
  animation: loop3 30s 4.3s linear infinite;
}

.loop5 {
  animation: loop3 30s 8.6s linear infinite;
}

.loop6 {
  animation: loop3 30s 12.9s linear infinite;
}

.loop7 {
  animation: loop3 30s 17.2s linear infinite;
}

.loop8 {
  animation: loop3 30s 21.5s linear infinite;
}

.loop9 {
  animation: loop3 30s 25.8s linear infinite;
}



  /* contact */
  /* 文字スクロール　コンタクト */
.contactsec {
  position: relative;
  }

.contactscroll {
  width: 100%;
  overflow:hidden;
  height: 30%;
  font-weight: bold;  
  }
  
  .contactscrollp {
  font-size: 3000%;
  display : inline-block;
  white-space : nowrap;
  animation : text_scroll 30s linear infinite;
  padding-left: 100%;
  margin-top: 0%;
  padding-top: 0%;
  font-weight: bold;
  margin-bottom: 0;
  }
  
  @keyframes text_scroll{
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
   }

 
   .contactleft {
    position: absolute;
    top: 10%;
    margin-left: 5%;
    font-weight: bold;
   }

   .contactr {
    width: auto;
    position: absolute;
    top: 10%;
    right: 0;
    padding: 0;
    font-weight: bold;
   }

   .conborder {
    border-bottom: dashed black;
    margin-bottom: 10%;
    width: 40%;
    margin-left: 50%;
   }

   /* こわだりについてページ */

   .foodconcept{
    width: 100%;
    height: auto;
    display: flex;
   }

   .foodconcept2{
    width: 100%;
    text-align: center;
   }

   .foodconcept p{
    font-size: 450%;
   }

   .foodconcept3 img{
    width: 100%;
    height: auto;
   }

   .foodconcept3{
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
   }

   .foodconceptcomment{
    width: 80%;
    height: auto;
    margin:0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
   }
   
   .foodconceptricegrape{
    width: 100%;
    height: auto;
    display: flex;
   }

   .foodconceptrice {
    width: 100%;
    margin-left: 10px;
    margin-right: 5px;
   }

   .foodconceptgrape {
    width: 100%;
    margin-left: 5px;
    margin-right: 10px;
   }

   .foodconceptricegrape img{
    width: 100%;
    height: 500px;
   }

   /* こだわりページ終了 */

   /* ラインアップ　ページ */
   .lineuppage{
    width: 100%;
    height: auto;
    display: flex;
   }

   .lineuppage2 {
    width: 30%;
    height: auto;
    text-align: center;
   }

   .lineuppage3 {
    width: 70%;
    height: auto;
    font-size: 150%;
   }

   /* ラインアップページ　肉 */
   .meat{
    width: 100%;
   }
   
   .meat2{
    width: 100%;
    height: auto;
   }

   .meat2 p{
    font-size: 300%;
    padding: 0;
    margin: 0 auto;
   }

   .meat4 img{
    width: 100%;
    height: 300px;
   }

   .meat4 {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 50px;
    text-align: center;
    width: calc(30%); 
   }

   .meat4 p{
     margin-top: 0%;
   }

   .meat3 {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
   }

   .meat3::after{ 
    content:"";
    display: block;
    width:30%;
    margin-left: 10px;
    margin-right: 10px;
  }

  /* ラインアップページ　野菜 */
  .vegetable{
    width: 100%;
    margin-top: 50px;
   }
   
   .vegetable2{
    width: 100%;
    height: auto;
   }

   .vegetable2 p{
    font-size: 300%;
    padding: 0;
    margin: 0 auto;
   }

   .vegetable4 img{
    width: 100%;
    height: 300px;
   }

   .vegetable4 {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 50px;
    text-align: center;
    width: calc(30%); 
   }

   .vegetable4 p{
     margin-top: 0%;
   }

   .vegetable3 {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
   }

   .vegetable3::after{ 
    content:"";
    display: block;
    width:30%;
    margin-left: 10px;
    margin-right: 10px;
  }

  /* ラインアップページ　果物 */
  .fruit{
    width: 100%;
    margin-top: 50px;
   }                              
   
   .fruit2{
    width: 100%;
    height: auto;
   }

   .fruit2 p{
    font-size: 300%;
    padding: 0;
    margin: 0 auto;
   }

   .fruit4 img{
    width: 100%;
    height: 300px;
   }

   .fruit4 {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 50px;
    text-align: center;
    width: calc(30%); 
   }

   .fruit4 p{
     margin-top: 0%;
   }

   .fruit3 {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
   }

   .fruit3::after{ 
    content:"";
    display: block;
    width:30%;
    margin-left: 10px;
    margin-right: 10px;
  }

  /* lineページ */
  .linelogodiv {
    width: 100%;
    height: auto;
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .linelogo {
    width: 30%;
  }
  .qrcodediv {
    width: 100%;
    height: auto;
    text-align: center;
  }
  .qrcode{
    width: 40%;
  }

  .linep{
    margin-top: 70px;
    word-break: break-all;
    font-weight: bold;
  }

   /* フッター */
   .footerdiv{
    margin-top: 100px;
    display: flex;
    margin-left: 50%;
   }

   .footera {
    margin-left: 15px;
   }

}




/*====================
 スマートフォン用のスタイル
=====================*/
@media screen and (max-width: 767px) {

   body {
    min-width: 375px;
    margin: 0 auto 0 auto;
    background-color: #f5f4e9;
}

  ul {
    list-style: none;
    padding-left: 0;
  }

  li{
    list-style:none;
    padding-left: 0;
  }

  a {
    text-decoration: none;
    color: black;
  }
  
  a:hover {
    text-decoration: underline;
  }

  /* ロゴとヘッダー */

  .headerall {
    position: relative;
  }

  .logonav{
    display: flex;
    width: 100%;
  }

  .logo img{
    width: 100%;
  }

  .logo {
    width: 12%;
    padding: 0;
    margin: 0;
    /* nav重なり */
    z-index: 2;
  }

  .navdivall{
    width: 100%;
    display: flex;
    /* nav重なり */
    z-index: 2;
    margin-top: 10px;
  }

  .navdivall2 a{
    display: block;
    font-size: 1vw;
    padding-left: 10px;
    writing-mode: vertical-rl;
  }

  .navdivall2 {
    display: flex;
    right: 0;
  }

  /* トップイメージ画像 */

.topimg img{
  width: 100%;
  height: auto;
}

.topimg {
  z-index: 1;
}

/* トップイメージ画像　コメント */
.topcomment12 {
  width: 100%;
  z-index: 2;
  height: auto;
  position: absolute;
  top: 25%;
  display: flex;
}

.topcommentleft {
  width: 100%;
  height: auto;
  margin-left: 5%;
}

.topcommentleft p{
  font-size: 5vw;
}

.topcommentright {
  width: 100%;
  margin-left: 33%;
}

.topcommentright p{
  font-size: 5vw;
}

  /* about */

  .aboutcomment{
    word-break: break-all;
    font-weight: bold;
  }

  .aboutcomment2 {
    word-break: break-all;
  }

  .loopall {
    width: 100%;
    height: 400px;
    display: flex;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 0;

  }

  .loop_wrap {
    width: 50%;
    height: auto;
    text-align: right;
    overflow: hidden;
    box-sizing: 900px;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .loop_wrap img {
    height: auto;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 0;
  }


  .slider{
    padding: 0;
    margin: 0;
  }
  
  
   .slider img{
  width:60%;
  height: 200px;
  margin-top: 20px;
  margin-left: 40px;
  }
  

  
  /* ラインアップ */
  
.lineupall {
  background-color: white;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 0;
  font-weight: bold;
  margin-bottom: 0;
  padding-bottom: 0;
}

.lineupscreendiv{
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-color: white;
  height: 100%;
  top: 0;
  z-index: 1;
}

.lineupcomment{
width: 100%;
}

.lineupleft{
  font-weight: bold;
  width: 100%;
}

.lineupr{
  word-break: break-all;
}

/* 文字スクロール　ラインアップ */

.lineupscroll {
  width: 100%;
  overflow:hidden;
  height: 30%;
  font-weight: bold;
  background-color: white;
  }
  
  .lineupscrollp {
  font-size: 2000%;
  display : inline-block;
  white-space : nowrap;
  animation : text_scroll 30s linear infinite;
  padding-left: 100%;
  margin-top: 0%;
  padding-top: 0%;
  font-weight: bold;
  background-color: white;
  margin-bottom: 0;
  }

@keyframes text_scroll{
 0% { transform: translateX(0)}
 100% { transform: translateX(-100%)}
}

/* スクロール　画像 */

.scrollall{
  position:relative;
  z-index: 3;
}

.imgscroll {
  /* widht85%にすると横幅ピッタリ 親要素にrelativeを指定すると100%でピッタリになった*/
width: 100%;
height: auto;
overflow: hidden;
z-index: 1;
position: absolute;
top:30%;
font-weight: bold;
z-index: 4;
}

.imgscroll img{
width: 150px;
height: 150px;
margin-left: 100px;
font-weight: bold;
}

.imgscroll ul {
  display: flex;
  height: 200px;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-left: 100%;
  position: relative;
}
  
.imgscroll li {
  margin-bottom: 0;
  padding-bottom: 0;
  position: absolute;
  left:0;
}
 

@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-1000%);
  }
}

.loop3 {
  animation: loop3 30s linear infinite;
}

.loop4 {
  animation: loop3 30s 4.3s linear infinite;
}

.loop5 {
  animation: loop3 30s 8.6s linear infinite;
}

.loop6 {
  animation: loop3 30s 12.9s linear infinite;
}

.loop7 {
  animation: loop3 30s 17.2s linear infinite;
}

.loop8 {
  animation: loop3 30s 21.5s linear infinite;
}

.loop9 {
  animation: loop3 30s 25.8s linear infinite;
}



  /* contact */
  /* 文字スクロール　コンタクト */
.contactsec {
  position: relative;
  }

.contactscroll {
display: none;
  }
  
  .contactscrollp {
  display: none;
  }
  
  @keyframes text_scroll{
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
   }

   .contactleft {
    top: 10%;
    font-weight: bold;
    margin-left: 5%;
   }

   .contactr {
    width: auto;
    top: 10%;
    right: 0;
    padding: 0;
    font-weight: bold;
   }

   .conborder {
    border-bottom: dashed black;
    margin-bottom: 10%;
    width: 80%;
    margin-left: 5%;
;
   }

   /* こわだりについてページ */

   .foodconcept{
    width: 100%;
    height: auto;
   }

   .foodconcept2{
    width: 100%;
    text-align: center;
   }

   .foodconcept p{
    font-size: 200%;
   }

   .foodconcept3 img{
    width: 100%;
    height: auto;
   }

   .foodconcept3{
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
   }

   .foodconceptcomment{
    width: 80%;
    height: auto;
    margin:0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
   }
   
   .foodconceptricegrape{
    width: 100%;
    height: auto;
    display: flex;
   }

   .foodconceptrice {
    width: 100%;
    margin-left: 10px;
    margin-right: 5px;
   }

   .foodconceptgrape {
    width: 100%;
    margin-left: 5px;
    margin-right: 10px;
   }

   .foodconceptricegrape img{
    width: 100%;
    height: 250px;
   }

   /* こだわりページ終了 */

   /* ラインアップ　ページ */
   .lineuppage{
    width: 100%;
    height: auto;
    display: flex;
   }

   .lineuppage2 {
    width: 30%;
    height: auto;
    text-align: center;
   }

   .lineuppage3 {
    width: 70%;
    height: auto;
    font-size: 150%;
   }

   /* ラインアップページ　肉 */
   .meat{
    width: 100%;
   }
   
   .meat2{
    width: 100%;
    height: auto;
   }

   .meat2 p{
    font-size: 300%;
    padding: 0;
    margin: 0 auto;
   }

   .meat4 img{
    width: 100%;
    height: 200px;
   }

   .meat4 {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 50px;
    text-align: center;
    width: calc(40%); 
   }

   .meat4 p{
     margin-top: 0%;
   }

   .meat3 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 12%;
   }


  /* ラインアップページ　野菜 */
  .vegetable{
    width: 100%;
    margin-top: 50px;
   }
   
   .vegetable2{
    width: 100%;
    height: auto;
   }

   .vegetable2 p{
    font-size: 300%;
    padding: 0;
    margin: 0 auto;
   }

   .vegetable4 img{
    width: 100%;
    height: 200px;
   }

   .vegetable4 {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 50px;
    text-align: center;
    width: calc(40%); 
   }

   .vegetable4 p{
     margin-top: 0%;
   }

   .vegetable3 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 12%;
   }

  /* ラインアップページ　果物 */
  .fruit{
    width: 100%;
    margin-top: 50px;
   }                              
   
   .fruit2{
    width: 100%;
    height: auto;
   }

   .fruit2 p{
    font-size: 300%;
    padding: 0;
    margin: 0 auto;
   }

   .fruit4 img{
    width: 100%;
    height: 200px;
   }

   .fruit4 {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 50px;
    text-align: center;
    width: calc(40%); 
   }

   .fruit4 p{
     margin-top: 0%;
   }

   .fruit3 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 12%;
   }

  /* lineページ */
  .linelogodiv {
    width: 100%;
    height: auto;
    margin-top: 70px;
    margin-bottom: 70px;
    margin-left: 5%;
  }
  .linelogo {
    width: 30%;
  }
  .qrcodediv {
    width: 100%;
    height: auto;
    text-align: center;
  }
  .qrcode{
    width: 40%;
  }

  .linep{
    margin-top: 70px;
    word-break: break-all;
    font-weight: bold;
  }


   /* フッター */

   .footerdiv{
    width: 100%;
    margin-top: 50px;
   }

   .footerdiv a {
    padding-left: 20px;
   }

   .footerdiv2{
    width: 100%;
   }

   .footerdiv3 {
    width: 100%;
   }

}