@charset "utf-8";

/* headerはじまり */
header {
position: fixed;
width: 100%;
transition: .3s;
z-index: 900;
opacity: 1;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size    : 1.9px 1.7px;
height: 85px;
display: flex;					
align-items: center;			
justify-content: space-between;
padding: 1vw 3vw;			
font-weight: 700;
}

.logo img{
width: 200px;
top: 25px;
left: 10px;
position: absolute;
}

.hd{
height: 85px;
padding: 0em;
}

a {
color:#fff;
display: block;
}

ul {
  list-style: none;
  position: relative;
  text-align: center;
}

li {
  float: left;
}

/* clear'n floats */
ul:after {
  clear: both;
}

ul:before,
ul:after {
    content: " ";
    display: table;
}

nav {
  position: relative;
  background: transparent;
  text-align: center;
  letter-spacing: 1.5px;
  top: 2px;
  left: 35px;
  font-size: 10px;
}

/* prime */
ul.primary li a {
  display: block;
  padding: 20px 30px;
  border-right: 1px solid rgba(226,226,226);
}

ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {
  
  color: #000;
}

/* subs */
ul.sub {
  position: absolute;
  z-index: 200;
  box-shadow: 2px 2px 0 #BEBEBE;
  width: 35%;
  display:none;
}

ul.sub li {
  float: none;
  margin: 0;
}

ul.sub li a {
  border-bottom: 1px dotted #ccc;
  border-right: none;
  color: #000;
  padding: 15px 30px;
}

ul.sub li:last-child a {
  border-bottom: none;
}

ul.sub li a:hover {
  color: #000;
  background: #eeeeee;
}

/* sub display*/
ul.primary li:hover ul {
  display: block;
  background: #fff;
}

/* keeps the tab background white */
ul.primary li:hover a {
background: #494544;
background-image:  radial-gradient(#696969 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size    : 1.9px 1.7px;
  color: #fff;
  text-shadow: none;
}

ul.primary li:hover > a{
  color: #fff;
} 

.blank{
width: 100%;
height: 50px;
}

/* ハンバーガーメニューはじまり */
.hamburger {
  display : none;
}

nav.globalMenuSp {
display: none;
}

/* headerおわり */

/* footerはじまり */
.footer0 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 300px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size    : 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.footer0 img{
width: 200px;
}
.footer1 { grid-area: 1 / 1 / 2 / 2; 
padding: 10px;
}
.footer2 { grid-area: 5 / 1 / 6 / 3;
padding: 10px;
font-size: 12px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
}
.footer3 { grid-area: 5 / 3 / 6 / 5;
padding-top: 70px;
font-size: 10px;
font-weight: 300;
color: #fff;
letter-spacing: 1px;
}
.footer4 { grid-area: 3 / 1 / 4 / 3; 
padding: 10px;
font-size: 12px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
}
.footer5 { grid-area: 1 / 3 / 5 / 4; 
padding: 10px;
font-size: 12px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
line-height: 1em;
padding-top: 50px;
}
.footer6 { grid-area: 1 / 4 / 5 / 5; 
padding: 10px;
font-size: 12px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
line-height: 1em;
padding-top: 50px;
}
.footer7 { grid-area: 1 / 5 / 5 / 6; 
padding-top: 30px;
padding: 10px;
font-size: 12px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
line-height: 1em;
padding-top: 50px;
}
/* footerおわり */

/* --- レスポンシブはじまり ----- */

@media (max-width: 768px){
    
/* --- ハンバーガーメニューはじまり ----- */  
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 2%;
  top   : 3%;
  width : 45px;
  height: 45px;
  cursor: pointer;
  text-align: center;
  }
.hamburger span {
  display : block;
  position: absolute;
  width   : 35px;
  height  : 2px ;
  left    : 6px;
  background :#fff;
  -webkit-transition: 0.5s all;
  -moz-transition   : 0.5s all;
  transition        : 0.5s all;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */

.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  left: 60%;
  opacity: 0;
  -webkit-animation: active-btn17-bar02 .8s forwards;
  animation: active-hamburger-bar02 .8s forwards;
}
@-webkit-keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

.hamburger::after {
  position: absolute;
  top: 75%;
  left: 85%;
  display: block;
  content: '';
  width: 50px;
  height:50px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  transition: all .75s;
}
.hamburger.active::after {
  border: 1px solid #fff;
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  letter-spacing: 3px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size    : 1.9px 1.7px;
  text-align: left;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
font-weight:bold;
display:inherit;
font-size: 14px;
line-height: 1.5em;
}

nav.globalMenuSp ul {
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size    : 1.9px 1.7px;
margin: 0 auto;
padding: 0;
width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li a:hover{
  color:#fff;
  opacity: 0.5;
}

nav.globalMenuSp ul li a {
  display: block;
color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}
/* --- ハンバーガーメニューおわり ----- */

/* --- ヘッダーはじまり ----- */
.logo img{
width: 180px;
top: 25px;
left: 10px;
position: absolute;
}
    
.primary {
display: none;
}
/* --- ヘッダーはじまり ----- */

/* footerはじまり */
.footer0 {
display: grid;
grid-template-columns: repeat(2, 1fr) 1.5fr repeat(3, 1fr);
grid-template-rows: repeat(2, 0.5fr) repeat(3, 1fr) 0.5fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 350px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size    : 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.footer0 img{
width: 170px;
}
.footer1 { grid-area: 1 / 1 / 2 / 7; 
padding: 10px;
}
.footer2 { grid-area: 5 / 1 / 6 / 5;
padding: 10px;
font-size: 9px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
}
.footer3 { grid-area: 6 / 1 / 7 / 7;
padding-top: 20px;
font-size: 10px;
font-weight: 300;
color: #fff;
letter-spacing: 1px;
padding: 5px;
}
.footer4 { grid-area:2 / 4 / 3 / 7;
padding: 5px;
font-size: 10px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
text-align: right;
}
.footer5 { grid-area: 3 / 1 / 5 / 3;
padding-top: 0px;
padding: 2px;
font-size: 9px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
line-height: 1.2em;
padding-top: 1px;
padding-left: 5px;
}
.footer6 { grid-area: 3 / 3 / 5 / 5;
padding: 2px;
font-size: 9px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
line-height: 1.2em;
padding-top: 1px;
}
.footer7 { grid-area: 3 / 5 / 5 / 7; 
padding-top: 0px;
padding: 2px;
font-size: 9px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
line-height: 1.2em;
padding-top: 1px;
}
/* footerおわり */
    
}