/*
Theme Name: IPテーマ Ver.2
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: Ryo Kawahara
Version: 2.0.0
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

ul {
  margin: 0;
  /* デフォルトCSS打ち消し */
  padding: 0;
  /* デフォルトCSS打ち消し */
  list-style: none;
  /* デフォルトCSS打ち消し */
}

html{
  overflow-x: clip;
 }

/* ボディー条件 */
body {
  overflow-x: clip;
  width: 100vw;

  margin: 0;
  padding: 0;
}

a,a:hover,a:visited{
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

button {
       all: unset; 
      }

.head-logo{
  fill: #f7f8ff;
}

.pc-head-logo{
  fill: #f7f8ff;
}

.foot-logo{
  fill: #f7f8ff;
}

.navi-logo{
  fill: #f7f8ff;
}

.content {
  opacity: 0;
  animation-name: PageAnime-content;
  animation-duration: 0.75s;
  animation-delay: 0.75s;
  animation-fill-mode: forwards;
  pointer-events: auto;
}
.animation .content {
  opacity: 1;
  pointer-events: auto;
}

@keyframes PageAnime-content {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.sc{
  opacity: 0;
}

.sc.move{
  animation: screen 1s ;
  animation-fill-mode: both;
  will-change: opacity;
  }

@keyframes screen {
  0% {
        opacity: 0;

  }
        
  100% {
        opacity: 1;
  }       

}


/*  */
/*  スマホ　*/
/*  */

@media screen and (max-width: 767px) {

  .jp9{
    color: #F7F8FF;
    text-align: left;
    font-family: "Noto Sans JP", serif;
    font-size: 1.45vh;
    font-weight: 630;
    margin: 0;
    line-height: 1.944;
  }

  .en6{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 0.969vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
    line-height: 1.944;
  }
  
  .en9{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 1.45vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
    line-height: 1.944;
  }
  

  .jp12{
    color: #F7F8FF;
    text-align: left;
    font-family: "Noto Sans JP", serif;
    font-size: 1.938vh;
    font-weight: 850;
    font-style: normal;
    margin: 0;
  }

  .en11{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 1.777vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }
  
  .en12{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 1.938vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }

  .jp14{
    color: #F7F8FF;
    text-align: left;
    font-family: "Noto Sans JP", serif;
    font-size: 2.259vh;
    font-weight: 850;
    font-style: normal;
    margin: 0;
  }
  
  .en14{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 2.259vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }

  .en15{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 2.423vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }

  .en25{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 4.039vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }


.m0{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0vh;
}

.m1{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
}

.m2{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
}

.m5{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
}

.m7{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7.5vh;
}

.m10{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
}

.m12{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12.5vh;
}

.m15{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15vh;
}

.m20{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
}

.m25{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25vh;
}

.m28{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28vh;
}

.m50{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50vh;
}

.left{
    margin-left: 0vw;
}

.right{
    margin-right: 0vw;
}

.bos{
    width: 69.9%;
    border: 0.01px solid;
    border-color: transparent;
    box-sizing:border-box;
}

.bom{
  width: 83.9%;
  border: 0.01px solid;
  border-color: transparent;
  box-sizing:border-box;
}

.pc-head-logo {
  display: none;
}


.head-logo{
  width: 18.18vw;
  position: absolute;
  z-index: 999;
  margin-left: 15.05vw;
  margin-top: 5.5vh;
}

.bot{
  width: 18.18vw;
}

.pc-bot{
  display: none;
}

.bot-poi{
  position: absolute;
  width: 0.01vw;
  height: 0.01vw;
  border-radius: 0.005vw;
  background-color: #041941;
  left: 1.74vh;
  transform: translateX(-50%);
}

.bot-bun{
  position: absolute;
  color: #041941;
  left: 50%;
  transform: translateX(-50%);
  line-height: 3.48vh;
}
  

.foot-bac{
  height: 64.7vh;
  border-top-right-radius: 6.99vw;
  border-top-left-radius: 6.99vw;
}

.foot-box{
  top: 2vh;
}

.foot-logo{
  width: 22.3vw;
}

.pc-foot-got{
  display: none;
}

.foot-got {
margin-top: 3vh;
width: 2.5vw;
stroke: #F7F8FF;
}

.foot-line{
  width: 4.195vw;
  border-bottom: solid 0.161vh;
  border-color: #F7F8FF;
  margin-left: 0;
}

.foot-cop{
  position: absolute;
  right: 0vw;
  writing-mode: sideways-lr;
  bottom: 5vh;
  right: 5vw;
}

.side{
  position: sticky;
  top: 20vh;
  right: 0;
  width: 25.1vw;
  height: 31.7vh;
  transform:translateX(20vw) ;
  animation: sideback 0.5s ease-in 0s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  pointer-events: none;
}


.side-box{
  position: absolute;
  top: 100vh;
  right: 0;
  width: 32.1vw;
  overflow-x: clip;
  pointer-events: none;
}

.side.sidemove{
animation: side 1s ease-in 0s;
animation-delay: 0s;
animation-fill-mode: forwards;
}

@keyframes side {
0% {    
transform:translateX(20vw) ;
}

100% {    
transform:translateX(0vw) ;
}

}

@keyframes sideback {
0% {    
transform:translateX(0vw) ;
}

100% {    
transform:translateX(20vw) ;
}

}

.side.out{
animation: sideback 0.5s ease-in 0s;
animation-delay: 0s;
animation-fill-mode: forwards;
}

.pc-side-navi{
  display: none;
}

.side-navi{
  width: 7.538vw;
  position: relative;
  margin-top: 6.5vh;
  height: 2vh;
  pointer-events: auto;
  left: 25.1vw;
  transform: translateX(-100%);
  cursor: pointer;
  z-index: 998;
  stroke: #F7F8FF;
}

.navigamen {    
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  display: none;
  background-color: #041941CC;
}

.navi-box{
  position: absolute;
  top: 0;
  right: -10vw;
  width: 68.7vw;
  height: 100vh;
  background-color: #041941;
}

.navi-sum{
  margin-left: 10vw;
}

.navi-line{
  width: 2.195vw;
  border-bottom: solid 0.161vh;
  border-color: #F7F8FF;
  margin-left: 0;
}

.navi-box.move{
  animation: navibox 1s ease-in 0s;
}

@keyframes navibox {
  0%{
        right: -55.1vw;
  }
  
  45%{
        right: -5vw;
  }

  65%{
        right: -14vw;
  }

  100%{
        right: -10vw;
  }
}

.pc-batsu{
  display: none;
}

.batsu{
  position: relative;
  margin-top: 5.6vh;
  margin-right: 15vw;
  margin-left: auto;
  width: 5.24vw;
  stroke: #F7F8FF;
}


.navi-logo{
  width: 11.3vw;
  bottom: 4vh;
  margin-top: auto;
  position: absolute;
  left: calc(50% - 5vw);
  transform: translateX(-50%);
}

  .top{
    height: 100vh;
  }

  .top-pic{
    width: 100vw;
    position: absolute;
  }

  .pc-top-pic{
    display: none;
  }

  .top-pic img{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }

  .top-sum{
    top: 20vh;
  }

  .top-bun{
    width: 56.99vw;
    margin-left: 0;
  }
  
  /* 共通部分２　ここまで */


  
  
  }



/* パソコン用*/
@media screen and (min-width: 767px) {

  .en6{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 0.969vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
    line-height: 1.944;
  }

  .jp9{
    color: #F7F8FF;
    text-align: left;
    font-family: "Noto Sans JP", serif;
    font-size: 1.89vh;
    font-weight: 630;
    margin: 0;
    line-height: 1.944;
  }

  
  .en9{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 1.89vh;
    font-weight: 640;
    font-style: normal;
    margin: 0;
    line-height: 1.944;
  }
  

  .jp12{
    color: #F7F8FF;
    text-align: left;
    font-family: "Noto Sans JP", serif;
    font-size: 1.938vh;
    font-weight: 850;
    font-style: normal;
    margin: 0;
  }

  .en11{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 1.777vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }
  
  .en12{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 1.938vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }

  .jp14{
    color: #F7F8FF;
    text-align: left;
    font-family: "Noto Sans JP", serif;
    font-size: 3.15vh;
    font-weight: 850;
    font-style: normal;
    margin: 0;
  }
  
  .en14{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 2.259vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }

  .en15{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 2.423vh;
    font-weight: 660;
    font-style: normal;
    margin: 0;
  }

  .en25{
    color: #F7F8FF;
    text-align: left;
    font-family: "Montserrat", serif;
    font-size: 7.5vh;
    font-weight: 830;
    font-style: normal;
    margin: 0;
  }


.m0{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0vh;
}

.m1{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.2vh;
}

.m2{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5vh;
}

.m5{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6vh;
}

.m7{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7.5vh;
}

.m10{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
}

.m12{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12.5vh;
}

.m15{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15vh;
}

.m20{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
}

.m25{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 58vh;
}

.m28{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28vh;
}

.m50{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50vh;
}

.left{
    margin-left: 0vw;
}

.right{
    margin-right: 0vw;
}

.bos{
    width: 80.1vw;
    border: 0.01px solid;
    border-color: transparent;
    box-sizing:border-box;
}

.bom{
  width: 83.9%;
  border: 0.01px solid;
  border-color: transparent;
  box-sizing:border-box;
}


.pc-head-logo{
  position: absolute;
  z-index: 999;
  top: 10vh;
  width: 21.9vw;
  left: 50%;
  transform: translateX(-50%);
}


.head-logo{
display: none;
}

.bot{
  display: none;
}

.pc-bot{
  width: 14.5vw;
}

.bot-poi{
  position: absolute;
  width: 0.01vw;
  height: 0.01vw;
  border-radius: 0.005vw;
  background-color: #041941;
  left: 1.74vh;
  transform: translateX(-50%);
}

.bot-bun{
  position: absolute;
  color: #041941;
  left: 50%;
  transform: translateX(-50%);
  line-height: 3.48vh;
}
  

.foot-bac{
  height: 80vh;
  border-top-right-radius: 2.1vw;
  border-top-left-radius: 2.1vw;
}

.foot-box{
  top: 6.5vh;
}

.foot-logo{
  width: 7.92vw;
}

.foot-got{
  display: none;
}

.pc-foot-got {
width: 2.02vw;
stroke: #F7F8FF;
}

.foot-line{
  width: 0.85vw;
  border-bottom: solid 0.24vw;
  border-color: #F7F8FF;
  margin-left: 0;
}

.foot-cop{
  position: absolute;
  bottom: 5vh;
  margin-left: 50%;
  margin-right: auto;
  transform: translateX(-50%);
  font-size: 1.89vh;
}

.side{
  position: sticky;
  top: 20vh;
  right: 0;
  width: 25.1vw;
  height: 31.7vh;
  transform:translateX(20vw) ;
  animation: sideback 0.5s ease-in 0s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  pointer-events: none;
}


.side-box{
  position: absolute;
  top: 100vh;
  right: 0;
  width: 32.1vw;
  overflow-x: clip;
  pointer-events: none;
}

.side.sidemove{
animation: side 1s ease-in 0s;
animation-delay: 0s;
animation-fill-mode: forwards;
}

@keyframes side {
0% {    
transform:translateX(20vw) ;
}

100% {    
transform:translateX(0vw) ;
}

}

@keyframes sideback {
0% {    
transform:translateX(0vw) ;
}

100% {    
transform:translateX(20vw) ;
}

}

.side.out{
animation: sideback 0.5s ease-in 0s;
animation-delay: 0s;
animation-fill-mode: forwards;
}

.side-navi{
  display: none;
}

.pc-side-navi{
  width: 3.6vw;
  position: relative;
  margin-top: 6.5vh;
  height: 2vh;
  pointer-events: auto;
  left: 25.1vw;
  transform: translateX(-100%);
  cursor: pointer;
  z-index: 998;
  stroke: #F7F8FF;
}

.navigamen {    
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  display: none;
  background-color: #041941CC;
}

.navi-box{
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #041941;
}

.navi-sum{
  margin-right: 0vw;
  width: 28vw;
}

.navi-home{
  font-size: 2.64vh;
}
.navi-service{
  font-size: 2.64vh;
}
.navi-voice{
  font-size: 2.64vh;
}
.navi-news{
  font-size: 2.64vh;
}
.navi-company{
  font-size: 2.64vh;
}
.navi-contact{
  font-size: 2.64vh;
}

.navi-line{
  width: 0.851vw;
  border-bottom: solid 0.378vh;
  border-color: #F7F8FF;
  margin-left: 0;
}

.navi-box.move{
  animation: navibox 1s ease-in 0s;
}

@keyframes navibox {
  0%{
        right: -55.1vw;
  }
  
  45%{
        right: -5vw;
  }

  65%{
        right: -14vw;
  }

  100%{
        right: -10vw;
  }
}

.batsu{
  display: none;
}

.pc-batsu{
  position: relative;
  margin-top: 10vh;
  margin-right: 6vw;
  margin-left: auto;
  width: 3.5vw;
  stroke: #F7F8FF;
}


.navi-logo{
  width: 5.34vw;
  bottom: 7vh;
  margin-top: auto;
  position: absolute;
  left: calc(50%);
  transform: translateX(-50%);
}

  .top{
    height: 100vh;
  }

  .top-pic{
    display: none;
  }

  .pc-top-pic{
    width: 100vw;
    position: absolute;
  }

  .pc-top-pic img{
    width: 100vw;
    height: auto;
    object-fit: cover;
  }

  .top-sum{
    top: 60vh;
  }

  .top-bun{
    width: 43.6vw;
    margin-left: 0;
  }
  
  /* 共通部分２　ここまで */



}

.ipwh{
  color: #F7F8FF;
  }
  .ipbl{
  color: #041941;
  }
  .ipspe{
  color: #8497FC;
  }
  .ipsbl{
  color: #C4CDFF;
  }

  .navi-contact{
    color: #8497FC;
  }