@charset "UTF-8";

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

header {
  height: 80px;
  width: 100%;
  padding: 0px;
  background-image: url(https://hamasakanosato.com/image/wallpaper-footer_3.jpg);
  position: fixed;
  top: 0;
  z-index: 10;
  display: flex; /*直下の子要素を横並びにする*/
}
.header2 {
  height: 80px;
  width: 100%;
  padding: 0px 15px;
  position: fixed;
  top: 0;
  z-index: 11;
  display: flex; /*直下の子要素を横並びにする*/
}

.logo {
  background-image: url(https://hamasakanosato.com/image/wallpaper_1.jpg);
  border:solid 0px #000;
  border-radius: 0px 0px 3px 3px;
  box-shadow: 3px 3px 3px 0 rgba(220, 220, 220, 0.5);
  width: 250px;
  height: 120px;
  padding: 15px 25px 10px 20px;
}

.logo img{
  width: 100%;
transition: all 0.3s ease 0s;
}
.logo img:hover {
opacity: 0.6;
}
.hed {
  margin: 0px 120px 0px auto; /*nav要素の左側に余白*/
}

.hed ul {
  display: flex; /*リストを横並びにする*/
  list-style: none; /*unorder listの 中点を消す*/
  padding: 0; /*中点が位置する左余白を消す*/
  margin: 0px; /*上下にある余白を消す*/
  font-size: 14px;
}

.hed a {
  letter-spacing : 0.1em;
  color: #ffffff;
  text-decoration: none;
  display: block; /*幅と高さを持ったブロック要素*/
  line-height: 60px; /*ヘッダーの高さと同じ60px*/
  margin: 10px 6px 0px;
  padding: 0px 8px; /*各リスト項目の余白左右20px*/
  position: relative;  /* アンダーバーの位置を決めるための基準 */
}

/*▽▽ヘッダーリストのアンダーバー▽▽*/
.hed ul li ::after {
  position: absolute; /*親要素であるaタグを基準に位置を指定*/
  bottom: 10px; /*アンダーバーが位置する、各リストの下端からの高さ*/
  left: 0;/*アンダーバーを各リストの左端に指定*/
  content: ''; /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーバーなので何も記載しない*/
  width: 100%; /*アンダーバーの幅は各リストの幅*/
  height: 1px; /*アンダーバーの高さ（太さ）*/
  background: #ffffff; /*アンダーバーの色*/
  transform: scale(0, 1);/*アンダーバーの縮尺比率。ホバー前はx方向に0*/
  transform-origin: center top;/*変形（アンダーバーの伸長）の原点を、liの真ん中指定*/
  transition: transform 0.75s;/*変形の時間*/
}

.hed ul li :hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}
/*△△ヘッダーリストのアンダーバー△△*/







 @media screen and (max-width: 800px) {
.hed {
  display: none;
}

.hed a {
  letter-spacing : 0.1em;
  color: #000000;
  text-decoration: none;
  display: block; /*幅と高さを持ったブロック要素*/
  line-height: 60px; /*ヘッダーの高さと同じ60px*/
  padding: 0 5px; /*各リスト項目の余白左右20px*/
  position: relative;  /* アンダーバーの位置を決めるための基準 */
font-size: 50%;
}

.logo {

  width: 180px;
  height: 90px;
  padding: 10px;
}

}