/* ▼ページ全体の構成 */

.html {
  height: 100%;
}

.body{
padding: 0px 0px 0px 0px; /* bodyの内側の余白を指定する */
height: 100%;
font-size: 14px;
font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Helvetica, Arial, 'ＭＳ Ｐゴシック', sans-serif;
margin: 0;
}

 /* ▼ヘッダー */
.Header {
position: fixed; /* ヘッダーを固定する */
top: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* ヘッダーの横幅を指定する */
height: 4em; /* ヘッダーの高さを指定する */
padding: 0px; /* ヘッダー内側の余白を指定する(上下左右) */
background-color: #19282f; /* ヘッダーの背景色を指定する */
color: #fff; /* ヘッダーのフォントの色を指定する */
}

 /* ▼フッター */
.Footer {
position: sticky; /* フッターを固定する */
top: 100vh;
bottom: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* フッターの横幅を指定する */
height: 10em; /* フッターの高さを指定する */
padding: 0px; /* フッター内側の余白を指定する(上下左右) */
background-color: #000000; /* フッターの背景色を指定する */
color: #fff; /* フッターのフォントの色を指定する */
}

 /* ▼コンテンツ */
.Contents {
background: #f9f9f9;
width: 100%; /* コンテンツの横幅を指定する */
overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
}

 /* ▼トップ画像 */
p.topimg img{
   width: 100%; 
}

img.miniimage { display: none; }   /* ※1 */

/* ▼表示領域が600px以上の場合 */
@media (min-width: 600px) {
   img.miniimage { display: none; }  /* miniを非表示 */
   img.bigimage  { display: block; } /* bigを表示 */
}
/* ▼表示領域が600px未満の場合 */
@media (max-width: 599px) {
   img.miniimage { display: block; } /* miniを表示 */
   img.bigimage  { display: none; }  /* bigを非表示 */
}

.resizeimage img { width: 100%; }   /* ※2 */

/* ▼文字センター寄せ */
.block {
  display: block;
  width: 80%;
  font-size: 2vw;
  line-height: 1.8;
  margin: 10vh auto;
  
 /* ▼中央寄せ */
  text-align: center;
}

/* ▼テーブルのスタイル１ */
.ProductTable {
    border: solid 0px #000000;
    border-collapse: separate;
    border-spacing: 40px 0px;
    vertical-align: top;
}

.ProductTable td {
    border: solid 0px #000000;
    border: solid 0px #000000;
}

/* ▼テーブルのスタイル２ */
.ProductTable2 {
    border: solid 0px #000000;
    border-collapse: separate;
    border-spacing: 20px 20px;
    text-align: left;
    font-size: 20px;
    vertical-align: top;
}

.ProductTable td {
    border: solid 0px #000000;
    border: solid 0px #000000;
}

.nice-label{
  position: absolute;
  top: 15px;
  left: 10px;
  font-size: 16px;
  color: #a0a0a0;
  transition: all 0.25s ease;
  
  &.focus{
    top: -25px;
    left: 5px;
    font-size: 14px;
    color: #fff;
  }
}

/* ▼リンク下線を消す */
.link {
  text-decoration: none;
}

a:link, a:visited, a:hover, a:active {
  color: #000;
}

/* ▼ボタンスタイル：ノーマル */
.button {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676D7;
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
}

/* ▼ボタンスタイル１：ホバーでグラデーション */
/* From uiverse.io by @xueyuantan */
button {
 width: 30em;
 height: 3em;
 border-radius: 30em;
 font-size: 20px;
 font-family: inherit;
 border: none;
 position: relative;
 overflow: hidden;
 z-index: 1;
 box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

button::before {
 content: '';
 width: 0;
 height: 3em;
 border-radius: 30em;
 position: absolute;
 top: 0;
 left: 0;
 background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
 transition: .5s ease;
 display: block;
 z-index: -1;
}

button:hover::before {
 width: 30em;
}

/* ▼ボタンスタイル２：ホバーでポップアップ */
/* From uiverse.io */
button2 {
  padding: 0.5em 3em;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #78b5a4;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

button2:hover {
  background-color: #19282f;
  box-shadow: 0px 15px 20px rgb(170, 170, 208);
  color: #fff;
  transform: translateY(-7px);
}

button2:active {
  transform: translateY(-1px);
}