* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;
  background-color: x#f0f8ff;
}

header {
  height: 60px;
  width: 100%;
  padding: 0px 60px;
  font-size: 1em;
  position: relative;
  top: 0;
  z-index: 10;
  display: flex;   
}
.header {
margin: 0 auto;
   background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);   
    
    
    
}
.header-pre {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  height: 50px;
  width: 100%;
  padding: 0px 40px;
  background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
    xbackground-color:#333333;
  position: relative;
  top: 0;
  z-index: 10;
  
    justify-content:flex-end; 
}


.logo {
  font-size: 20px;
  font-weight:bold;
   text-align:bottom;
    line-height:60px;
    position:;
    
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
}
.logo img {
  display: inline-block;
width:40px;
    
}
nav {
  margin: 0 0 0 auto;
    
}

header > nav > ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
header > div > ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav a, .nav-pre a {
  display: block;
  line-height: 60px;
  padding: 0 20px;
}
.nav a, .logo a, .nav a i {
  color: #ffffff;
  text-decoration: none;
}
.nav-pre a {
  color:#f2f2f2;
    
  text-decoration: none;
}
.header a:link, .header a:visited {
    font-weight:bold;
}
.header-pre li a:hover {
   color:white;
}

.header li:hover {
xborder-radius: 0.2em;
  xbackground-image: linear-gradient(to right, #304c62 0%, #517fa4 100%);
    xbackground-color:#004b8f;
        background-color:#333333;
    xbackground-color: #6c767f;
    xbackground-color: #ffffff;
        xborder-bottom:2px solid black;
    font-weight:bold;
    }
.nav li a:hover {
  color: #ffffff;
  text-decoration: none;
  xfont-weight:bold;
  display: block;
  xline-height: 60px;
  padding: 0 20px;
    xtext-shadow: 0 2px 2px rgba(0,0,0,.8);
}


.sm {
  display: none;
}


/**********************************�@
�ȉ��A�n���o�[�K�[���j���[�̐ݒ�@
************************************/

@media (max-width: 999px) {

	header {
 	 padding: 0px 20px;
  }
  .pc {
    display: none;
  }
  .logo {
	font-size: 1.1em;
  }
 .logo img {
    width:15%;
 }
  #toggle-menu {
    background-color: transparent;
    position: relative;
    cursor: pointer;
    margin: 0 0 0 auto;
    height: 60px;
    width: 60px;   
  }

  .icon span {
    position: absolute;
    left: 15px;
    width: 25px;
    height: 2px;
    background-color: white;
    border-radius: 8px;
    transition: ease 0.75s;
  }

  .icon span:nth-of-type(1) {
    top: 20px;
  }
  .icon span:nth-of-type(2) {
    top: 29px;
  }
  .icon span:nth-of-type(3) {
    bottom: 20px;
  }

  .close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 29px;
  }

  .close span:nth-of-type(2) {
    opacity: 0;
  }

  .close span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 28px;
  }

  .sm {
	  xcolor:black;
    xtext-align:left;
    
      top: 60px;
      left: 0px;
      position: absolute;
      z-index: 10;
      width: 100%;
      xbackground-color: rgba(34, 49, 52, 0.9);
      background-color: #c5d7f7;
    xbackground-color:#f8f8ff;
  }

header > nav > ul {
    flex-direction: column;
  }

  .nav a {
	color:black;
    text-align: left; 
    xborder-top: solid 0.5px rgba(255, 255, 255, 0.6);
    border-bottom: solid 0.5px #666666;
  }
.nav li:hover {
	color:black;
    background-color: #304c62;
    border-bottom:0px;
    }
}

/* 以下　FIXED MENU */

*x {
  margin: 0;
  padding: 0;
}

body {
  xfont-family: 'Roboto';
}
/*
#submenu {
  justify-content: center;
  text-align: center;
  xdisplay: -ms-flexbox;
  xdisplay: -webkit-flex;
  xdisplay: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: ;
  box-shadow: 0px 1px 4px #333333;
  margin: 0;
  padding: 0;
  xheight: 100px;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 99999;
  position: sticky;
}


#submenu .submenutitle {
  font-size: 3.2em;
  xpadding-right: 20px;
  display: inline-block;
  padding: 10px 50px 0px 0;
}

#submenu ul {
  list-style-type: none;
  xbackground-color: rgb(248, 248, 248);
  xbackground-color: rgba(238, 238, 238, 0.95);
  xbackground-color: rgba(230, 230, 240, 0.95);
  xbackground-color: rgba(255, 255, 255, 0.95);
  position: relative;
  margin: 0;
  padding: 0;
}

#submenu ul li {
  display: inline-block;
  position: relative;
  line-height: 1.6;
}

#submenu ul li:hover {
  xbackground-color: rgba(238, 238, 238, 0.479);

}

#submenu ul li a {
  color: #000;
  xcolor: #666666;
  text-decoration: none;
  font-size: 15px;
  padding: 28px 18px 0.3em 18px !important;
  display: block;
  font-weight: bold;
}
#submenu ul li a:hover {
  color: rgb(0, 0, 0); 
}

#submenu ul ul {
  position: absolute;
  min-width: 200px;
  background-color: rgb(36, 36, 36);
  display: none;
  text-align: left;
}

#submenu ul ul li {
  display: block;
  background-color: rgb(116, 70, 70);
  text-align: left;
}

#submenu ul li:hover ul {
  display: block;
}

.fa-caret-down {
  margin-left: 10px;
}

#submenu div {
  background-color: rgb(36, 36, 36);
  color: rgb(240, 240, 240);
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
  display: none;
}


@media(min-width:769px) {
  #submenu {
    height: 80px;
  }
  #submenu ul li {
      display: inline-block;
      position: relative;
      xborder-bottom: 6px solid rgb(248, 248, 248);
      border-bottom: 6px solid rgba(255, 255, 255, 0.95);
  }
  
  #submenu ul li:hover {
      xbackground-color: rgba(238, 238, 238, 0.479);
      border-bottom: 6px solid #517fa4;
  }

}
@media(max-width: 768px) {
  #submenu div {
      display: block;
  }
  #submenu ul {
      display: none;
      position: static;
      background-color: rgb(36, 36, 36);
  }

  #submenu ul li {
      display: block;
  }
  #submenu ul ul {
      position: static;
      background-color: rgb(36, 36, 36);
      border-bottom: none;
  }
  #submenu ul li a {
      color: rgb(255, 255, 255);
  }
  #submenu ul li a:hover {
      color: rgb(196, 196, 196); 
      border-bottom: none;
  }
  #product-title {
      font-size: 2.4em;

  }
  .responsive-none {
      display: none;
  }
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
#product-title {
  margin: 0 auto;
  padding: 15px 10%;
  font-size: 3.2em;
  xtext-align: left;
}