@charset "utf-8";
body{
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/*========= 上部固定させるためのCSS ===============*/
#header{
  height: 100px;/*高さ指定*/
  width:100%;/*横幅指定*/
  /*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(12, 179, 95);
  color:#fff;
  text-align: center;
  padding: 10px;
}

/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed{
  position: fixed;/*fixedを設定して固定*/
    z-index: 999;/*最前面へ*/
    top:0;/*位置指定*/
    left:0;/*位置指定*/
}

/*==================================================
フッターナビ　横並びのための設定
===================================*/

#g-navi{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/

  list-style: none;
}

#g-navi li a{
  display: block;
  text-decoration: none;
  color: #fff;
 
}

#g-navi li{
  margin:0 15px;
}

/*==================================================
フッターナビ　中心から外に線が伸びる（下部）
===================================*/

#g-navi li a{
  /*線の基点とするためrelativeを指定*/
position: relative;
}

#g-navi li a:hover{
color:#0481A2;
}

#g-navi li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background:#0481A2;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
#g-navi li a:hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}


/*========= ボタンのためのCSS ===============*/

/*塗りから線に変わる*/
.btnchangeline {
  /*線の基点とするためrelativeを指定*/
position:relative;
  /*ボタンの形状*/  
color:#333;
  padding: 10px 30px;

display:inline-block;
  text-decoration: none;
  outline: none;
  /*アニメーションの指定*/   
transition:all 0.3s ease-in-out;
}

/*線の設定*/
.btnchangeline::before {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  /*線の形状*/
  width: 100%;
  height: 100%;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  /*はじめは透過0に*/
  opacity: 0;
  transform: scale(0, 1);
  /*アニメーションの指定*/   
  transition: all 0.3s;
}

/*背景の設定*/
.btnchangeline::after {
  content: '';
  /*絶対配置で背景の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  /*背景の形状*/
  width: 100%;
  height: 100%;
  background-color:rgb(136, 226, 109);
  /*アニメーションの指定*/ 
  transition: all 0.3s;
}

/*hoverした際の背景と線の形状*/
.btnchangeline:hover::before {
  opacity: 1;/*不透明に*/ 
  transform: scale(1, 1);/*X方向に線を伸ばす*/
}

.btnchangeline:hover::after {
  opacity: 0;/*透過0に*/
  transform: scale(0, 1);/*X方向に背景を縮小*/
}

/*テキストの設定*/
.btnchangeline span {
  /*テキストを前面に出すためz-indexの値を高く設定*/  
position: relative;
z-index: 2;
  /*テキストの形状*/
color: #fff;
  /*アニメーションの指定*/   
  transition: all 0.3s;
}

/*hoverした際のテキストの形状*/
.btnchangeline:hover span {
  letter-spacing: 2px;
color: #333;
}

/*========= その他のCSS ===============*/

h1{
  font-size:2rem;
  margin:10px;
  text-align: center;
}
h2{
  font-size:25px;
  margin:75px 0 75px;
  text-align: center;
}
h3{
  font-size:25px;
  margin:75px 0 50px;
  text-align: center;
  border-top:1px solid rgb(122, 120, 120);
  padding-top: 30px;
}
h5{
  font-size:25px;
  margin:75px 0 50px;
  text-align: center;
  padding-top: 30px;
}
.link:hover{
  opacity:0.6;
  transition-duration: 0.3;
}
/*=========公開準備中===============*/
.koukai{
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
.junbi{
  max-width: 90%;
  margin-bottom:50px;
}

/*=========会社概要===============*/
.gaiyou{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  font-size:20px;
}
.koumoku{
flex-basis:20%;
margin-bottom:30px;
margin-left: 30px;

}
.answer{
  flex-basis:65%;
  margin-bottom:30px;
}

 /*=========写真・説明（関連会社・商品紹介・お知らせ）===============*/
.photo-text{
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items: center;

}

.photo{
  flex-basis:30%;
  margin-bottom:20px;
 }

.photo img{
  border-radius: 20%;
}
.photo2{
  flex-basis:20%;
  margin:20px;
 }

 .photo2 img{
 border-radius: 20%;
}
.photo3{
  flex-basis:40%;
  margin:20px;
}
.photo3 img{
  border-radius: 20%;
}

  .text{
    flex-basis:55%;
    margin:20px 5px;
    font-size:18px;
  }
  .text2{
    flex-basis:80%;
    padding:30px 20px;
    margin-bottom: 30px;
    font-size:18px;
   background-color: rgb(248, 200, 232);
   text-align: center;

  }
  .reshipi{
    flex-basis:50%;
    margin:10px 20px;
    font-size:20px;
  }
  
  .na{
    font-size:25px;

  }
/*=========ボタン（もやし・こんにゃく・麺）===============*/
.btn{
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
}
.btnchangeline{
  margin:20px;
  font-size:18px;
}

  /*=========マップ・住所・フッター===============*/
  #akusesu{
    background-color: rgb(12, 179, 95);
  }
  
  
  .akusesu{
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
  }
  .address{
    flex-basis:20%;
    padding:60px;
  
  }
  .name{
    flex-basis:20%;
    padding:80px;
    background-color: rgb(190, 197, 194);
  }
  
  .map{
    flex-basis:50%;
    font-size:12px;
    margin:15px;
  }
     



.map iframe{
  width:100%;
  height:240px;
  margin-bottom:8px;
}

footer{
text-align: center;
background:rgb(12, 179, 95);
color:#fff;
padding:30px;
}
/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 5px;
  bottom: 20px;
  height: 50px;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #737373;
  padding: 0 0 0 35px;
  border-top: solid 1px;
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
/***トップへ戻るボタンここまで***/





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

h4{
  display: none;
}
h1{
  width: 100%;
}
.no-pc{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}

#g-navi{
  font-size: 10px;
  flex-basis:40%;
}

.akusesu{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
}

.map{
  flex-basis:90%;
}

.name{
  flex-basis:100%;
  margin-top: 15px;
  padding:60px 100px;
}

.address{
    flex-basis:100%;
    padding:60px 30px;
}
.koumoku{
  font-size:15px;
  margin-left: 5px;
}
.text{
  font-size:15px;
}
.na{
  font-size:20px;
}
.btnchangeline{
  margin:5px;
  font-size:15px;
}



}