@charset "UTF-8";
 
/* ****************************************************************************************************************** */
/*ヘッダー
/* ****************************************************************************************************************** */


/*ヘッダー全体*/

.header-box{
  position: fixed;
  font-family: "serif";
  z-index: 100;
  transition: background-color .5s, color .5s;
  height: 170px;
}

.header-box.change-color {
    background-color: #FFF;
}

.header-box span.change-color2 {
  color:#000;
}


.header-box a:hover{
  opacity: 0.5;
  transition: 0.3s;
}


/*ヘッダーロゴ*/

.header-logo a{
  position: relative;
  display: inline-block;
  width:310px;
  height:170px;
  color:#000;
  z-index: 100;
}

.dio_header_logo{
  animation-name:fadeInAnime;
  animation-duration:3s;
  margin-top: 30px;
  margin-left: 30px;
  height: 100px;
}

.header-logo span{
  position: absolute;
  display: inline-block;
}

.header-font1{
    animation-name: fadeInAnime;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    opacity: 0;
    top: 29px;
    left: 180px;
    font-size: 40px;
    letter-spacing: 10px;
    color: #000;
}

.header-font2{
    animation-name: fadeInAnime;
    animation-duration: 10s;
    top: 80px;
    left: 152px;
    font-size: 32px;
    font-family: gioviale, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    color: #000;
}

.header-font3{
    animation-name: fadeInAnime;
    animation-duration: 10s;
    top: 110px;
    left: 190px;
    font-size: 32px;
    font-family: gioviale, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    color: #000;
}


/*ヘッダーメニュー*/

.main-header-menu{
  position: absolute;
  top:73px;
  right: 20px;;
  z-index: 100;
}

.header-li {
  animation-name:fadeInAnime;
  animation-duration:3s;
  letter-spacing: 0.5vw;
  padding-right: 1.5vw;
  font-size: 1.25vw
}

.header-li a{
    position: relative;
    display: inline-block;
    text-decoration: none;
    text-decoration: none;
    color: #000;
}

.header-li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background:#CCC;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}

.header-li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}





/*ヘッダーアニメーション*/

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/*スマホ仕様*/
#nav-toggle{
  color: #FFF;
}

#nav-toggle,#gloval-nav{
  display:none;
}

@media screen and (max-width: 1450px) {
    
 .header-box{
  height: 100px;
}
    
 .header-logo a{
  width:310px;
  height:80px
}

.dio_header_logo{
  margin-top: 15px;
  margin-left: 30px;
  height: 80px;
}

.header-logo span{
  position: absolute;
  display: inline-block;
}

.header-font1{
        top: 14px;
        left: 150px;
        font-size: 30px;
        letter-spacing: 10px;
        color: #000;
    }

.header-font2{
  top:49px;
  left:132px;
  font-size: 24px;
}

.header-font3{
  top:71px;
  left:161px;
  font-size: 24px;
}

body {
font-family: "Roboto", serif;
}

h1 {
text-align: center;
}
    
 .main-header-menu{
  position: absolute;
  top:43px;
  right: 20px;;
  z-index: 100;
}

}



@media screen and (max-width: 1300px) {
    
 .header-box{
  height: 100px;
}
    
 .header-logo a{
  width:310px;
  height:80px
}

.dio_header_logo{
  margin-top: 14px;
  margin-left: 30px;
  height: 80px;
}

.header-logo span{
  position: absolute;
  display: inline-block;
}

.header-font1{
top:14px;
left:150px;
font-size: 30px;
letter-spacing:10px;
    color:#000;
}

.header-font2{
  top:49px;
  left:132px;
  font-size: 24px;
}

.header-font3{
  top:71px;
  left:161px;
  font-size: 24px;
}


  
.main-header-menu{
  display:none;
}

#nav-toggle,#gloval-nav{
  display:inline;
}

body {
font-family: "Roboto", serif;
}

h1 {
text-align: center;
padding-top: 60px;
}

#nav-toggle {
position: fixed;
top: 34px;
right: 25px;
height: 32px;
cursor: pointer;
}
#nav-toggle > div {
position: relative;
width: 36px;
}
#nav-toggle span {
width: 100%;
height: 1px;
left: 0;
display: block;
background: #333;
position: absolute;
transition: transform 0.3s ease-in-out, top 0.2s ease;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 14px;
}
#nav-toggle span:nth-child(3) {
top: 28px;
}
#nav-toggle:hover span:nth-child(1) {
top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
top: 23px;
}

.open #nav-toggle span {
background: #fff;
}
.open #nav-toggle span:nth-child(1) {
top: 15px;
transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
top: 15px;
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 15px;
transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {
z-index: 1000;
}

#container {
z-index: 900;
}

#gloval-nav {
background: #000;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
text-align: center;
display: flex;
visibility: hidden;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20px;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

#gloval-nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 30px 0;
transition: color 0.3s ease;
}
#gloval-nav a:hover {
color: #666;
}
#gloval-nav ul {
list-style: none;
}
#gloval-nav ul li {
opacity: 0;
transform: translateX(200px);
transition: transform 0.3s ease, opacity 0.1s ease;
}
#gloval-nav ul li:nth-child(2) {
transition-delay: 0.15s;
}
#gloval-nav ul li:nth-child(3) {
transition-delay: 0.3s;
}
#gloval-nav ul li:nth-child(4) {
transition-delay: 0.45s;
}
#gloval-nav ul li:nth-child(5) {
transition-delay: 0.6s;
}
#gloval-nav ul li:nth-child(6) {
transition-delay: 0.75s;
}
#gloval-nav ul li:nth-child(7) {
transition-delay: 0.9s;
}

/* open */
.open {
overflow: hidden;
}
.open #gloval-nav {
visibility: visible;
opacity: 1;
}
.open #gloval-nav li {
opacity: 1;
transform: translateX(0);
transition: transform 1s ease, opacity 0.9s ease;
}
}


@media screen and (max-width: 580px) {
  .header-box{
  height: 60px;
}
    
 .header-logo a{
  width:120px;
  height:60px;
}

.dio_header_logo{
  margin-top: 10px;
  margin-left: 5px;
  height: 40px;
}

.header-font1{
top:16px;
left:60px;
font-size: 20px;
letter-spacing:7px;
    color:#000;
}

.font-fade2{
  display: none;
}

.font-fade3{
  display: none;
}

 #nav-toggle {
top: 16px;
padding-right:5px;
}

}