@charset "UTF-8";

/* web font
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&family=Open+Sans:ital,wght@0,600;1,600&display=swap');
/*
font-family: "Open Sans", serif;
font-family: "Noto Sans JP", serif;
*/

/* common
   ========================================================================== */
body{
  -webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: #000;
  font-size: 16px;
  line-height: 1.8;
  background: #fff;
}

::selection {background: #000; color: #fff;}
::-moz-selection {background: #000; color: #fff;}

a:link { color: #0595FF; text-decoration:none; }
a:visited { color: #0595FF; text-decoration:none; }
a:hover { color: #0069B7; text-decoration:none; }
a:active { color: #0069B7; text-decoration:none; }

img{
  max-width: 100%;
  height: auto;
}
*:focus {
  outline: none;
}

@media screen and (max-width: 1023px) {
  .sp_ver{
    display: block;
  }
  .pc_ver{
    display: none;
  }
}
@media screen and (min-width: 768px) {
  
}
@media screen and (min-width: 1024px) {
  .sp_ver{
    display: none;
  }
  .pc_ver{
    display: block;
  }
}

/* font
   ========================================================================== */
.wf-en{
  font-family: "Open Sans", serif;
  font-weight: 600;
}
.wf-jp{
  font-family: "Noto Sans JP", serif;
  font-weight: 600;
}
.wf-jp.bold{
  font-weight: 700;
}

/* header
   ========================================================================== */
.header{
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.header__logo{
  width: 150px;
}
.header__navi{
  display: none;
}
.header .globle__navi{
  font-family: "Noto Sans JP", serif;
  font-weight: 600;
}
.globle__navi a{
  color: #000;
}

@media (hover: hover) and (pointer: fine) {
  .globle__navi a{
    transition: opacity .3s;
  }
  .globle__navi a:hover{
    opacity: .6;
  }
}

@media screen and (max-width: 767px) {
  
}
@media screen and (max-width: 767px) {
  .header{
    height: 80px;
    padding: 0 30px;
  }
  /*menu-btn*/
  .header .menu__btn{
    position: relative;
    display: block;
    cursor:pointer;
    width: 60px;
    height: 16px;
  }
  .header .menu__btn__icon:before,
  .header .menu__btn__icon:after{
    content: "";
    display: block;
    position: absolute;
    width: 60px;
    height: 2px;
    transition-duration: .2s;
    transition-property: transform;
  }
  .header .menu__btn__icon:before{
    top: 0;
  }
  .header .menu__btn__icon:after{
    bottom: 0;
  }
  .header .menu__btn .active{
    background: transparent;
  }
  .header .menu__btn .active:before,
  .header .menu__btn .active:after{
    margin-top: 0;
    width: 60px;
  }
  .header .menu__btn .active:before{
    transform: translateY(7px) rotate(-20deg);
  }
  .header .menu__btn .active:after{
    transform: translateY(-7px) rotate(20deg);
  }
  .header .menu__btn__icon,
  .header .menu__btn__icon:before,
  .header .menu__btn__icon:after,
  .header .menu__btn .close:before,
  .header .menu__btn .close:after{
    background: #000;
  }
  
  .header__navi-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 100%;
    height: 100vh;
    height: 100dvh;
  }
  .header .globle__navi{
    text-align: left;
    width: 85%;
    margin: 0 auto;
    color: #000;
  }
  .header .globle__navi li{
    font-size: 24px;
  }
  .header .globle__navi li+li{
    margin-top: 1em;
  }
}
@media screen and (min-width: 768px) {
  .header{
    height: 100px;
    padding: 0 30px;
  }
  .header__logo{
    width: 200px;
  }
  .header__navi{
    display: block!important;
  }
  .menu__btn{
    display: none;
  }
  .header__navi .globle__navi{
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  .header__navi .globle__navi li+li{
    margin-left: 40px;
  }
}




/* Footer
   ========================================================================== */
.footer{
  
}
@media screen and (max-width: 1023px) {
  .footer{
    margin-top: 100px;
    padding-bottom: 40px;
    text-align: center;
  }
  .footer p{
    font-size: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .footer{
    margin-top: 200px;
    padding-bottom: 60px;
    text-align: center;
  }
  .footer p{
    font-size: 12px;
  }
}