@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600&display=swap');
/*
Theme Name:unirage-creative
author :Daisuke Yonekura
ver :1.0.0
*/

/*
    Tangerine 
    Europa-Bold;
    <link rel="stylesheet" href="https://use.typekit.net/vqy0ode.css">
    font-family: europa, sans-serif;
    font-weight: 700;
    font-style: normal;

*/



html {
  min-width: 1280px;
  /* min-width1200pxないとレイアウトが崩れてまうけん注意 
    レスポンシブもPCも両方効かせたコーディングができなくなる
  */
  font-size: 62.5%; /* -> 10px */
  /* 解決策が出るまでは上記maxwidthは削除 */
  margin: 0 auto;
  background-color: #F7F6F4;
}

/* header,main ,footer,img,section {
  width: 100%;
} */


body{
  margin: 0;
}

main{
  background-color: #F7F6F4;
}

 body {
 
}

p,h2,h3,a,ul{
  
  font-weight: 200;
}


/* keyframe */



/* keyframe */

a {
  text-decoration: none;
  color: black;
}


input{
  font-size: 3rem;
  font-family: 'Noto Serif JP', Medium;
}


/* commons */

.head2{
  font-size: 4.5rem;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 3px;

}

.creative-text{
  font-size: 1.7rem;
  font-family: 'Noto Serif JP', Medium;
  line-height: 2.5;
  padding-top: 5%;
  letter-spacing: 3px;
}

.gold-line{
  margin-top: 10%;
  border-top: 2px solid #BAAD8E;
}

.blue-line{
  border-top: 1px solid #67A9B9;
}

/* commons */

/* header */



.l_header{
  display: none;
}

#sp-header,#g-nav{
 display: none;
}

/* header1 */

.header1 {
  display: none;
  background-color: white;
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 999;
}
 

.logo{
  position: absolute;
  width: 50px;
  left: 14%;
  top: 21%;
  margin-top: -1%;

}

#mail-nav{
  width: 100px;
  height: 71px;
  background-color: #67A9B9;
  border-radius: 96%;
  text-align: center;
  line-height: 75px;
  padding-left: 0%;
  margin-left: 3%;
 
}

#mail-nav a{
  padding: 2%;
}

.mail-logo{
  width: 38px;
}

.nav1{
  padding-top: 1%;
  padding-right: 13%;
}
.site-header1__wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem; }
  @media (min-width: 600px) {
    .site-header1__wrapper {
      display: flex;
      align-items: center;
      /* padding-left: 11%; */
      padding-top: 0;
      padding-bottom: 0;
      justify-content: space-between;
      position: relative;
     } }
@media (min-width: 600px) {
  .nav1__wrapper {
    display: flex; } }
 
@media (max-width: 599px) {
  .nav1__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
    background-color: #d9f0f7;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav1__wrapper.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0); } }
 
.nav__item1 a {
  display: block;
  font-size: 2rem;
  padding: 1.5rem 4rem;
  font-family: 'Noto Serif JP', Medium;

}
 
.nav1__toggle {
  display: none; }
  @media (max-width: 599px) {
    .nav1__toggle {
      display: block;
      position: absolute;
      right: 1rem;
      top: 1rem; } } 


/* header1 */

/* header2 */

.header2{
  display: grid;
  background-color: #F7F6F4;
  justify-content: center;
  grid-template-columns: 1fr 2fr; 
}

.left-header{
  margin: 0 7%;
 
}



.right-header{
 position: relative;
  width: 100%;
  height:700px;
 
}


.header-imgs{
  position:absolute;
  width: 100%;
  height:100%;
  background-image: url("img/fv-img.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;

}

.blue-squere{
  position: absolute;
  z-index: 0;
  width: 104%;
  top: 87%;
  right: 0%;
}


.unirage-logo{
  width: 100px;
  padding-left: 41%;
  padding-top: 5%;
}

#global-nav2{
  padding-top: 17%;
  padding-left: 33%;
}

.nav_head,#nav_contact{
  font-size: 1.5rem;
}

.nav2__item{
  padding: 5% 0;
}

.header2-span{
  font-size: 1.2rem;
  margin-left: 5%;
  display: table-cell;
}

.nav2__item a{
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 1.7rem;
}

.SpFv-img{
  display: none;
}

/* header2 */

/* header3 */
.header3 {
    background-color: white;
    width: 100%;
    height: 100px;
    top: 4%;
    position: absolute;
    z-index: 999;
}
 

.logo{
  position: absolute;
  width: 50px;
  left: 14%;
  top: 21%;
  margin-top: -1%;

}

#mail-nav{
  width: 100px;
  height: 71px;
  background-color: #67A9B9;
  border-radius: 96%;
  text-align: center;
  line-height: 75px;
  padding-left: 0%;
  margin-left: 3%;
 
}

#mail-nav a{
  padding: 2%;
}

.mail-logo{
  width: 38px;
}

.nav3{
  padding-top: 1%;
  padding-right: 13%;
}
.site-header3__wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem; }
  @media (min-width: 600px) {
    .site-header3__wrapper {
      display: flex;
      align-items: center;
      /* padding-left: 11%; */
      padding-top: 0;
      padding-bottom: 0;
      justify-content: space-between;
      position: relative;
     } }
@media (min-width: 600px) {
  .nav3__wrapper {
    display: flex; } }
 
@media (max-width: 599px) {
  .nav3__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
    background-color: #d9f0f7;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav3__wrapper.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0); } }
 
.nav__item3 a {
  display: block;
  font-size: 2rem;
  padding: 1.5rem 4rem;
  font-family: 'Noto Serif JP', Medium;

}
 
.nav3__toggle {
  display: none; }
  @media (max-width: 599px) {
    .nav3__toggle {
      display: block;
      position: absolute;
      right: 1rem;
      top: 1rem; } } 


/* header3 */

/* header */


/* concept */

.concept{
  padding: 0 10%;
  padding-top: 10%;
  display: flex;
  justify-content: center;
  position: relative;
  
}

.concept-texts{
  width: 650px;
}

.concept-imgs{
 
}

.concept-img{
  width: 500px;
  position: absolute;
  z-index: 0;
}

.gold-squere{
    position: absolute;
    top: 33%;
    left: 11%;
    width: 500px;
    height: 320px;
    z-index: 1;
}

.concept-cursive{
  position: absolute;
  width: 250px;
  z-index: 2;
}

.concept-right{
  padding-left: 51%;

}

/* concept */

/* ideal */

.ideal{
  padding: 0 10%;
  padding-top: 10%;
  display: flex;
  justify-content: center;
  position: relative;
  
}

.ideal-left{
  padding-right: 49%;
  padding-bottom: 12%;
}

.ideal-imgs{
 
}

.ideal-img{
  width: 500px;
  position: absolute;
  right: 9%;
  z-index: 0;
}

.ideal-squere{
  position: absolute;
  right: 7%;
  top: 29%;
  width: 500px;
  height: 320px;
  z-index: 1;
}

.ideal-cursive{
  position: absolute;
    width: 350px;
    top: 18%;
    right: 6%;
    z-index: 2;
}

.ideal-right{

}

/* ideal */

/* works */

.works{
  padding: 10%;
  background-color: #DFE7EA;
  position: relative;
}

.works-texts{
  text-align: center;
  padding: 10% 0;
}

#works-text{
 
}

.works-imgs{
  display: flex;
  justify-content: center;
  
}

.works-img1,.works-img2,.works-img3,.works-img4{
  width: 300px;
  height: 350px;

}

.deisighn-works{
  position: absolute;
  width: 350px;
  right: 3%;
  bottom: 5%;
}
/* works */


/* brand */

.brand{
  padding: 0 8%;
  padding-top: 10%;
  display: flex;
  justify-content: center;
  position: relative;
}

#brand-head{
  font-size: 3.5rem;
}

#brand-gold{
  margin-top: 5%;
}

.brand-imgs{
 
}

.brand-img{
  width: 500px;
  position: absolute;
  z-index: 0;
}

.brand-squere{
  position: absolute;
  top: 33%;
  left: 11%;
  width: 500px;
  height: 320px;
  z-index: 1;
  display: none;
}

.gold-squere{
  position: absolute;
  top: 31%;
  left: 5.5%;
  width: 500px;
  height: 320px;
  z-index: 2;
}

.brand-texts{
  width: 658px;
}

.brand-cursive{
    position: absolute;
    top: 22%;
    width: 350px;
    z-index: 3;
}

.brand-right{
  padding-left: 48%;
  padding-top: 3%;

}
/* brand */

/* flow */
.flow{
  padding: 10% 0;
  margin: 0 auto;
  text-align: center;
}

.flow-pcimg{
  background-image: url("img/flow.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 675px;
  background-position: center;
}


/* flow */

/* consul */

.consul{
  position: relative;
  padding: 15% 0;
}

.consul-imgs{
  position: absolute;
    display: flex;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 63%;
    justify-content: center;
    z-index: 2;
}



.consul-img1,.consul-img2,.consul-img3,.consul-img4{
  width: 200px;
  height: 250px;
  padding: 0 1%;
}

.consul-gold{
    position: absolute;
    width: 1000px;
    height: 300px;
    z-index: 1;
    bottom: 39%;
    left: 0;
    right: 0;
    margin: auto;

}

.consul-contacts{
 padding: 10% 0;
 z-index: 1;
}

.consul-contact{
  background-color: #4E7F8B;
  width: 880px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  z-index: 2;
  top: 54%;
  left: 0;
  right: 0;
  margin: auto;
  
}

.consul-contact a{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  line-height: 100px;
  text-align: center;
  font-size: 3rem;
  color: white;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 9px;
}

.consul-background{
    position: absolute;
    background-image: url("img/blue-background.png");
    height: 350px;
    bottom: 23%;
    width: 100%;
    background-size: cover;
    z-index: 0;
}

.gold-line-vtl{
  position: absolute;
  top: 73%;
  left: 0;
  right: 0;
  margin: auto;
  height: 70px;
}
/* consul */

/* instagram */

.insta{
  padding: 0 9%;
  padding-top: 0%;
  padding-bottom: 6%;

}

.insta-heads{
  text-align: center;
  padding: 3% 0;
}

/* instagram */

/* footer */
    footer{
      background-color: #09323C;
    }
    
    .footer-nav{
      position:relative;
      padding-top: 5%;
      padding-bottom: 5%;
      padding-left: 8%;
    }

    .footer-head{
      font-size: 3rem;
      color: white;
      padding-bottom: 3%;
      font-family: 'Noto Serif JP', serif;
    }

    .footer-line{
      width: 800px;
      position: absolute;

}
    

    .footer-ul{
      padding-top: 3%;
    }

    .footer-ul li{
      padding: 1% 0;
    }

    .footer-ul li a{
      font-size: 1.6rem;
      color: white;
      padding: 1% 0;
      font-family: 'Noto Serif JP', Medium;
    }

    .footer-copy{
       text-align: center;
       padding-bottom: 3%;
    }

    .footer-copy p{
      color: white;
      font-family: 'Noto Serif JP', serif;
      font-size: 2rem;
    }



/* footer */

/* news */
.achivements{
    font-size: 4rem;
    padding-top: 5%;
    padding: 1% 10%;
    padding-top: 10%;
}
/* news */


/* アニメーション */
.nav_head{
  position: relative;
}

.nav_head::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #BAAD8E;
  bottom: -10px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s;
  }
  
  .nav_head:hover::after {
  transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
  }

  .nav__item1 a{
    position: relative;
  }
  
  .nav__item1 a::after {
    position: absolute;
    left: 34px;
    content: '';
    width: 52.5%;
    height: 1px;
    background: #BAAD8E;
    bottom: 4px;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.3s;
    }
    
    .nav__item1 a:hover::after {
    transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
    }

     #mail-nav{
      transform: none;
     }

     #mail-nav a::after{
      transform: none;
      width: 0;
     }


    .consul-contact:hover{
        opacity: 0.6;
    }

    /* head2のホバー次のアニメーション */

    .nav__item3 a{
      position: relative;
    }
    
    .nav__item3 a::after {
      position: absolute;
      left: 34px;
      content: '';
      width: 52.5%;
      height: 1px;
      background: #BAAD8E;
      bottom: 4px;
      transform: scale(0, 1);
      transform-origin: left top;
      transition: transform 0.3s;
      }
      
      .nav__item3 a:hover::after {
      transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
      }
  
/* アニメーション */

/* contact form7 送信ボタンの不具合用 */

.wpcf7-submit {
  background-color: #000000;
  color: white;
  border-color: #000000;
  width: 650px;
  height: 130px;
  font-family: 'Noto Serif JP', serif;
  }
  

  /* その他 */
  .sp-header {
    display: none;
  }

  .sp-br{
    display: none;
  }
  /* その他 */