

.page-hanesproducts {

  font-family: "hiragino-kaku-gothic-pron", "museo-sans", sans-serif !important,Roboto,"Open Sans" , "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3" ,  "游ゴシック", "Yu Gothic", Verdana,"Meiryo UI" ,  "メイリオ",  "ＭＳ Ｐゴシック" , "MS PGothic" ,Meiryo, sans-serif;
  letter-spacing: 0.1em;
  color: #3c3c3c;
  background-color: #FFF;
  margin: 0;
  padding: 0;
  font-size: 11pt;
  }
  
  .page-hanesproducts b,.page-hanesproducts strong,.page-hanesproducts .bold{
    font-family: "hiragino-kaku-gothic-pron", "museo-sans", sans-serif !important,-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Segoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
  }
  
  .page-hanesproducts _:lang(x)::-ms-backdrop, .page-hanesproducts .selector {
    font-family: "hiragino-kaku-gothic-pron", "museo-sans", sans-serif !important,"Segoe UI", "メイリオ", Meiryo, sans-serif;
  }
  
  .page-hanesproducts p {
    margin: 0;
    padding: 0;
  }
  
  .page-hanesproducts a :hover {
    opacity: 0.7;
  }
  
  .page-hanesproducts li:hover {
    opacity: 0.9;
    display: block;
  }
  
  .site-header {
    background-color: #FFFFFF;
    position: fixed;
    margin: 0 auto;
    width: 100%;
    z-index: 9999;
    opacity: 0.99;
  }
  
  .site-header h1{
    height: 30px;
    position: relative;
  }
  
  
  .site-logo img{
    height: 20px;
    width: 97px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  
  .looknavi {
    width: 130px;
    position: absolute;
    top: 37%;
    right: 5%;
  }
  
  .page-hanesproducts main {
    padding: 150px 0 5px;
    display: block;
      background-color:#FFFFFF;
  }
  
  .homage-logo img{
    margin: 0 auto;
    padding: 0;
    height: 120px;
    width: 100%;
      background-color:#FFFFFF;
  
  }
  
  
    .ha-desc0 p{
    margin: 0px auto;
    width: 100%;
    font-size: 53px;
    font-weight: bold;
    text-align: center;
line-height: 58px;
      background-color:#FFFFFF;
  }
  
  
  .ha-desc p{
    margin: 0px auto;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 45px;
      background-color:#FFFFFF;
  }
  
  
  
    .ha-desc2 p{
    margin: 0px auto;
    width: 100%;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    line-height: 35px;
      background-color:#FFFFFF;
  }
  
  
  .main{
    margin: 0px auto 20px;
    background-color:#FFFFFF;
  }
  
  
  
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-color:  #FFFFFF;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color:  #FFFFFF;
}
  
  
  
  
  .centering_youtube {
    padding: 20px;              /* 余白指定 */
    text-align:  center;        /* 中央寄せ */
    background-color:  #FFFFFF;    /* 背景色指定 */
            /* 高さ指定 */
}

 
  
  /* #filter
  --------------------------- */
  #filter {
      margin: 0 auto;
      padding: 15px 0 50px;
      width: 80%;
      text-align: center;
    line-height: 2.1;
      font-size: 20px;
      font-weight: bold;
  }
  #filter a:link { text-decoration:none; color: #3c3c3c;}
  #filter a:visited { text-decoration:none; color: #3c3c3c;}
  #filter a:active { text-decoration:none; color: #db0d0d;}
  #filter a:hover { text-decoration:none; color: #db0d0d; opacity: 0.7;}
  
  #filter .active {
      font-weight: bold;
      background-image: linear-gradient(transparent 50%, #fdbdcc 50%);
  }
  #filter a.active:link { text-decoration:none; color: #3c3c3c;}
  #filter a.active:visited { text-decoration:none; color: #3c3c3c;}
  #filter a.active:active { text-decoration:none; color: #3c3c3c;}
  #filter a.active:hover { text-decoration:none; color: #3c3c3c;}
  
  /* #filterlist
  --------------------------- */
  #filterlist {
      margin: 0 auto;
      width: 100%;
      text-align: center;
      background-color: #FFF;
  
  
  }
  
  #filterlist ul {
      margin: 0 auto;
      padding: 0;
      width: 90%;
      text-align: center;
  }
  
  #filterlist ul li {
      margin: 5px auto;
      text-align: center;
      float: left;
      display: inline;
      overflow: hidden;
  
  }
  
  #filterlist ul li img {
      width: 100%;
      padding: 0 10px;
      float: center;
  }
  
  
  /* =======================================
      ClearFixElements
  ======================================= */
  #filterlist ul:after {
      content: ".";
      height: 0;
      clear: both;
      display: block;
      visibility: hidden;
  }
  
  #filterlist ul {
      display: inline-block;
      overflow: hidden;
  }
  
  
    .itemname01 {
    height: 100px;
    font-size: 9pt;
	  color: #2f2f2f;
    text-align: center;
margin: 10px 0px 90px;
  }
  
  
  .itemname {
    height: 60px;
    font-size: 13pt;
	 line-height:1.5;
	  font-weight: bold;
	  color: #c60c38;
    text-align: center;
 margin: 40px 0px 3px;
 
  }
  
  
 #filterlist a:link { text-decoration:none; color: #c60c38;}
  #filterlist a:visited { text-decoration:none; color: #c60c38;}
  filterlist a:active { text-decoration:none; color: #3c3c3c;}
  #filterlist a:hover { text-decoration:none; color: #3c3c3c; opacity: 0.7;}
  
  #filterlist .active {
      font-weight: bold;
      background-image: linear-gradient(transparent 50%, #fdbdcc 50%);
  }
  #filterlist a.active:link { text-decoration:none; color: #3c3c3c;}
  #filterlist a.active:visited { text-decoration:none; color: #3c3c3c;}
  #filterlist a.active:active { text-decoration:none; color: #3c3c3c;}
  #filterlist a.active:hover { text-decoration:none; color: #3c3c3c;}
   
  
  .itemcolor {
    width: 68px;
    height:15px;
	margin:auto;
	   text-align: center;
  }
  
  
  footer{
    width: 100%;
    background-color: #3c3c3c;
    color: #fff;
    text-align: center;
    font-size: x-small;
    padding: 10px 0;
    bottom: 0;
  }
  
  
  .heading {
height: 30px;
  background-color: #FFFFFF;