@charset "utf-8";
/*すべてのページで共有するスタイル*/
/*コメント*/
/*
コメント
*/
/*おまじない
1行目に @charset "utf-8";
*/
/*構文・名称*/
/*
セレクタ {
  プロパティ:値;
}
セレクタ･･･HTMLのどの部分？
プロパティ･･･なにを変えますか？
値･･･どんな風に？
*/
/*タイプセレクタ 要素名そのまま */
/*テキストの色変更 color:*/
h1 {
  color:lawngreen;
}

p {
  color:orange;
}

/* ピンポイントで狙いたいとき */
/* class属性で名前を付ける */
/* クラスセレクタ ドット+クラス名*/
.copy-color {
  color:red;
}

/*
idセレクタ
#idセレクタの名前 {

}
*/
/*子孫セレクタ*/
/*親要素名 子要素名*/
/*半角スペース区切り*/
footer p  {
  color:red;
}

/*複数セレクタ*/
/*要素名,要素名 カンマ区切り*/
/*
h1,h2 {
  color:#0f0;
}
*/
/*色指定*/
/* #16進数 #000000 ～ #FFFFFF*/

/*文字の大きさ指定*/
/* ブラウザ デフォルト16px */
/* 絶対値 50px */
/* 
相対値 2em (倍数) 200% ブラウザ、親要素の
フォントサイズに依存
相対値 2rem (倍数) ルート(ブラウザ、HTML要素)に依存
*/

h1 {
  color:#0f0;
  font-size:250%;/*40px*/
}

.content {
  /*横中央配置*/
  /*①要素の横幅を決める*/
  /*width 
  ウィズ
  ウィズス
  ワイドス
  */
  /*
  max-width:640px;はそれ以下になるとwidth100%
  それ以上になると640ｐｘ固定
  */
  max-width:640px;
  /*②残りの余白を左右均等に配置*/
  /*要素の外側余白 margin*/
  margin-left:auto;
  margin-right:auto;
}

h1,h2,li,footer {
  /*テキストの横中央配置*/
  /*align アライン*/
  text-align:center;
  /*フォントの種類指定*/
  font-family: 'Josefin Slab', serif;
}

li {
  /*リストのマーク削除*/
  /*none ナン*/
  list-style:none;

  /*要素の横並び*/
  /*float フロート*/
  /*width:33.33%;
  float:left;*/
}

/*フロートの解除方法*/
/*フロートによるデザインの崩れ回避*/
/*フロートがかかっている要素の親要素に解除プロパティ*/
ul {
  /*hidden ヒドゥン*/
  /*overflow:hidden;*/

  /*flexレイアウト*/
  /*横並びにしたい要素の親要素に設置*/
  display:flex;
  /*要素の均等配置*/
  justify-content:space-between;
  padding-left:0;
}
/*リンクのスタイル*/
/*疑似クラス*/
/* :link 未訪問時 */
/* :visited 訪問済み */
/* :hover カーソルが重なった時 */
/* :active クリックしている間 */
li a {
  color:#000;
  /*リンクの下線を削除*/
  text-decoration:none;
}

li a:hover {
  /*リンクの下線を復活*/
  text-decoration:underline;
}

/*疑似クラスでピンポイント*/
/*ul li:nth-of-type(2) {

}*/

/*枠線
border-方向:線の太さ 線の種類 線の色;
*/
header {
  border-top:10px solid #c2e08f;
}

h2 {
  /*背景画像差し込み*/
  /* background-image:url(画像のパス); */
  background-image:url(67Green/image/bg_h2.png);
  /*背景画像の繰り返し制御*/
  /*background-repeat:*/
  /*repeat-x 横に繰り返し*/
  /*repeat-y 縦に繰り返し*/
  /*no-repeat 1回だけ*/
  background-repeat:no-repeat;
  /*背景画像の位置調整*/
  /*background-position:左右 上下*/
  background-position:center bottom;
  /*背景画像のサイズ変更*/
  /*background-size:幅 高さ*/
  background-size:220px 28px;
}

section {
  /*要素に影をつける*/
  /*box-shadow:
  水平方向の距離(正の値は右 負の値は左)
  垂直方向の距離(正の値は下 負の値は上)
  影のぼかし(０はくっきりな影)
  影の広がり(正の値は拡大 負の値は縮小)
  影の色
  inset(影を内側に変更)
*/
  box-shadow:0 0 10px 0 #ccc;
  /*ショートハンド(プロパティの短縮形)*/
  /* 
    margin-top:10px;
    margin-bottom:10px;
    marginのショートハンド
    margin:10px; (上下左右)
    margin:10px 0; (上下 左右)
    margin:5px 2px 3px; (上 左右 下)
    margin:4px 5px 1px 0; (上 右 下 左)
    border:1px solid #ccc;
  */
  margin-top:40px;
  padding:10px 20px;
}

h1 {
  /*テキストに影*/
  /*text-shadow:*/
  /*
  水平方向の距離(正の値は右 負の値は左)
  垂直方向の距離(正の値は下 負の値は上)
  影のぼかし(０はくっきりな影)
  影の色
  */
  text-shadow: 3px 3px 0px #ccc;
  color:#fff;
  font-size:50px;
}

/*画像の拡大縮小*/
/*画像の幅を親要素100％(.content)*/
img,iframe {
  max-width:100%;
}

/*****************
ITEMページここから
******************/
table {
  width:100%;
}

td {
  text-align:center;
}

.price {
  text-align:right;
}

th {
  text-align:left;
}

th img:hover {
/*要素の角を丸くする*/
/*border-radius:左上の半径 右上の半径 右下の半径 左下の半径*/
  border-radius:100px;
}

.sp-item {
  /*要素の非表示*/
  display:none;
}

/*スタイルの切り分け(切り替え)*/
/* @media screen and (ブレイクポイント){}*/

@media screen and (max-width:480px){
/*480px以下の時適用*/
  h1 {
    color:red;
  }
  /*横並びを縦に上書き*/
  ul {
    display:block;
  }

  li a {
    background-color:#c2e08f;
    display:block;
    padding:1em 0;
    margin-bottom:0.5em;
    border-radius:6px;
  }

  table {
    display:none;
  }
  
  .sp-item {
    display:block;
  }

  /*商品一覧のスタイル*/
  .sp-item div {
    box-shadow:0 0 10px 0 #ccc;
    padding:10px 0;
    margin-bottom:20px;
    border-radius:20px;
  }
  
  .sp-item div p{
    text-align:center;
  }
  

}/*@media(480px)*/

@media screen and (min-width:480px) and (max-width:960px) {
/*480px以上、960px以下の時適用*/
}