/* ===============================================
index.html css + 全体css
=============================================== */

body{
  background-color: white;
  color: black;
  text-decoration: none;
  margin: auto; 
  width:auto;
}
*{
  margin: 0px;
  padding: 0px;
}
p{
  font-size: 20px;
}
#container{ /*全体の大きさ*/
  width: 980px;
  margin: auto;
}

.historyl-gazou{
  width: 300px;
  float: right;
  margin-left: 15px;
}
h2{
  font-size: 40px;
}
h3{
  font-size: 20px;
}


/* ===============================================
フッター始まり
=============================================== */
footer{
  padding-top: 35px;
  font-size: 30px;
  color: #f70000;
  text-align: center;
  width: 700px;
  margin: auto;
}
/* ===============================================
フッター終わり
=============================================== */




/* ===============================================
h2の文字のcss
===============================================  */
.kinn{
   color: rgb(255, 255, 255);
   color: #f70000;
   font-size: 30px;
   width: 980px;
   margin: auto;
   
}
/* ===============================================
ハンバーガ（左のボタン）　始まり
===============================================  */

/* ===============================================
ヘッダーのスタイリング
=============================================== */
.header {
  height: 70px;
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
}
.header__container {
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: inherit;
  color: #fff;
  padding: 0 25px;
  margin-right: auto;
  margin-left: auto;
}


/* ===============================================
ハンバーガーボタンのスタイリング
=============================================== */
input[type="checkbox"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.hamburger {
  display: block;
  width: 50px;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #000000;
  transition: all 0.5s;
}
.hamburger span::before {
  top: -10px;
}
.hamburger span::after {
  bottom: -10px;
}
input[type="checkbox"]:checked + .hamburger span {
  background-color: transparent;
}
input[type="checkbox"]:checked + .hamburger span::before {
  top: 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:checked + .hamburger span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* ===============================================
メニューのスタイリング
=============================================== */
.nav {
  position: fixed;
  width: 30%;
  height: 100vh;
  top: 80px;
  right: -120%;
  background-color: #ffffff;
  color: #fff;
  padding: 50px 0;
  transition: all 0.5s;
}
.nav__item a {
  display: block;
  font-size: 20px;
  padding: 10px 0 20px 50px;
  text-transform: uppercase;
  color: #000000;

}
.nav__item a:hover {
  color: #ff2200;
  background-color: #fff;
}
.nav__item a:visited {
  color: #ff2200;
}
input[type="checkbox"]:checked ~ .nav {
  right: 0;
}

/* ===============================================
ハンバーガ（左のボタン）終わり
=============================================== */

/* ===============================================
ナビゲーションメニュー（真ん中）始まり(index.html専用)
=============================================== */
.link {
text-align: center;
background-color: #ff0000;
  width: 980px;
  margin: auto;
}
.link ul {
margin-top: 10px;  
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
padding: 15px ;
}

.link ul li {
list-style: none;
display: inline-block;
width: 18%;
min-width: 90px;
  
}
.link ul li a {
	text-decoration: none;
  
} 
.link a:link{
  color: #ffffff;
}

.link a:visited{
  color: #000000;
}


/* ===============================================
ナビゲーションメニュー（真ん中） 終わり(index.html専用)
=============================================== */


/* ===============================================
ナビゲーションメニュー（真ん中）始まり(index.html以外)
=============================================== */
.rinku {
text-align: center;
background-color: #ff0000;
  width: 980px;
  margin: auto;
}
.rinku ul {
margin-top: 135px;  
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
padding: 15px ;
}

.rinku ul li {
list-style: none;
display: inline-block;
width: 18%;
min-width: 90px;
  
}
.rinku ul li a {
	text-decoration: none;
  
} 
.rinku a:link{
  color: #ffffff;
}

.rinku a:visited{
  color: #000000;
}


/* ===============================================
ナビゲーションメニュー（真ん中） 終わり(index.html以外)
=============================================== */

/* ===============================================
画像のスライドショー始まり
=============================================== */

/* ===============================================
親要素の設定 
=============================================== */
.gallery {
   width: 980px;
  overflow: hidden; /* 子要素がはみ出さないようにする */
  padding-top:100px;
  padding-bottom: 0px;
}

/* ===============================================
スライダー部分の設定 
=============================================== */
.gallery_slide {
  display: flex;
  width: 100%;
  animation: slide 24s linear infinite; /* 無限ループの設定 */
}

/* ===============================================
各アイテムの設定
=============================================== */
.gallery_slide li {
  flex: 0 0 25%; /* 1つの画像が全体の4分の1の幅を取る */
  width: 100%; /* 幅を指定 */
}

/* ===============================================
アニメーション（スライド） 
=============================================== */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 1周分の移動 */
  }
}

/* ===============================================
画像のスライドショー終わり
=============================================== */


/* ===============================================
Newsのcss始まり
=============================================== */
.NEWdezainn{
  background-color: white;
}

.news-list{
  list-style: none outside;
  padding: 0;
   width: 980px;
  margin: auto;
}
.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}
.news-list .item:first-child a{
  border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 140px;
  font-size: 16px;
  color: #000000;
  padding: 0 20px 0 0;
}
.news-list .item .category{
  margin: 0;
  min-width: 140px;
  padding: 0 20px 0 0;
}
.news-list .item .category span{
  background: #ff0101;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 4px 20px;
  padding-top: 4px;
  font-size: 12px;
  line-height: 1;
}
.news-list .item .title{
  width: 700px;
  margin: auto;
}
.news-list .item a:hover .title{
  color: #ff0000;
}

@media screen and (max-width: 767px){
.news-list .item a{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}

/* ===============================================
装飾 
=============================================== */
 
*{
  box-sizing: border-box;
}

/* ===============================================
テキストボックス
=============================================== */
.form_txt{
  margin-bottom: 20px;
}
textarea{
  vertical-align: top;
}

/* ===============================================
Newsのcss終わり
=============================================== */

/* ===============================================
historyl.html css 始まり
=============================================== */
.pointo{
  color: #f70000;
}

/* ===============================================
historyl.html css終わり
=============================================== */




/* ===============================================
menu.html css 始まり
=============================================== */

.money{/*値段調節 shoplリンク先　kakuni-shopなどに使用しています。*/
  color: #f70000;
  font-size: 40px;
  padding-right: 50px;

}

.menu{
  font-size: 50px;
}
.gazou{
 width: 980px;
 padding: 20px;
 margin: auto;
 text-align: center;
}

/* ===============================================
menu.html css 終わり
=============================================== */

/* ===============================================
akusesu.htmlcss 始まり + shople.リンク先画像
=============================================== */
.image{
 width: 980px;
 padding: auto;
 margin: auto;
 text-align: center;
}

/* ===============================================
akusesu.htmlcss 始まり + shople.リンク先画像
=============================================== */



/* ===============================================
shople.scc 始まり
=============================================== */
.primary{ /*shopl画像に使用*/
font-size: 20px;
font-weight: bold;
float: left;
padding: 20px;
width:auto;
text-decoration: none;
}

.primary a:link{
color: #000000;
}
.primary a:visited{
color: #f70000;
}

/*黒い丸を消去　始まり*/
ul{
  padding-left:0;
}

li{
  list-style:none;
}
/*黒い丸を消去　終わり*/

.shopl{
clear: both;/*配送についてで使用*/
}

/* ===============================================
shopl-css*終わり
=============================================== */