@charset "UTF-8";
html[lang="ja"]

/***************************************/
.clearfix::after {
  content:'';
  display:block;
  clear:both;
}

* html .clearfix             { zoom: 1;} /* IE6 */
*:first-child+html .clearfix { zoom: 1;} /* IE7 */
/***************************************/

/***************************************/


/*main*/
* {
    margin : 0px ;
    padding : 0px ;
    border : none ;
    font-family:'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    color: #071F32;
    font-weight : 400 ;
    font-style : normal ;
    letter-spacing: .05em;
    -webkit-text-size-adjust: 100%;
}


main{
    text-align: center;
}


h2{
    font-size: 64px ;
    font-weight: 700;
    display: inline-block;
    background: linear-gradient(180deg, #000000 0%,#0c3860 100%);
    background: -webkit-linear-gradient(-90deg, #000000 0%, #0c3860 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 319px) {
    h2{
        font-size: 19vw;
    }
}

h3{
    font-size: 24px ;
    font-weight: 700;
}

h4{
    font-size: 24px ;
    font-weight: 700;
}

h5{
    font-size: 20px ;
    font-weight: 500;
}


a {
    text-decoration: none;
}

a:link {
    color: #071F32;
    }
    
    a:visited {
    color: #071F32;
    }
    
    a:hover {
    color:#333399;
    }
    
    a:active {
    color:#3580BD;
    }

p {
    margin :  0px auto 0px auto ;
    font-size: 16px ;
    line-height: 2 ;
}

p.upper {
    font-size: 16px ;
    font-weight: bold;
    line-height: 1 ;
}

p.lower {
    font-size: 12px ;
    line-height: 1 ;
}


td{
    font-size: 16px ;
    line-height: 2 ;
}


ul,
li {
  list-style: none;
}

.textbox{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.back-white{
    background-color:#ffffff;
}

.back-blue{
    background-color:#1D7DCC;
}


.back-gra {
    width: 100%;
    height: 100vh;
    position:fixed;
    z-index: -5;
    top: 0;
    background: linear-gradient(-35deg, #124E80 0%, #1D7DCC 100%);
    background-size: 1920px 100%;
    background-position:center;
    background-repeat: no-repeat;
}

/***************************************/


/***************************************/
/* レスポンシブ */
.pc895 {
    display: block !important;
}
.sp895 {
    display: none !important;
}

@media screen and (min-width: 768px) and (max-width: 895px)  {
    .pc895 {
        display: none !important;
    }
    .sp895 {
        display: block !important;
    }
    
}

.pc767 {
    display: block !important;
}
.sp767 {
    display: none !important;
}

@media screen and (max-width: 767px)  {
    .pc767 {
        display: none !important;
    }
    .sp767 {
        display: block !important;
    }
}

.pc414 {
    display: block !important;
}
.sp414 {
    display: none !important;
}

@media screen and (max-width: 414px)  {
    .pc414 {
        display: none !important;
    }
    .sp414 {
        display: block !important;
    }
    
}
/***************************************/


/***************************************/
/***************************************/
/**************header*******************/
/***************************************/
/***************************************/

header{
    display: flex;
    justify-content: center;
}

.header-back{
    width: 100%;
    height: 140px;
    display: flex;
    z-index: 99;
    position: fixed;
    text-align:center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 1);
    transition: ease 1.0s;
}

.header-main{
    width: 100%;
    max-width: 1920px;
    height: 140px;
    display: flex;
    z-index: 999;
    position: fixed;
    text-align:center;
    background-color: rgba(255, 255, 255, 1);
    transition: ease 1.0s;
 
    
}

.header-back.hide {
    transform: translateY(-160px);
  }

@media screen and (max-width: 767px) {
    .header-main{
        display: block;
    }

}

.header-top{
    width: 100%;
    margin: 0px auto 0px auto;
    display: flex;
    position: relative;
    
    /* align-items: flex-end;
    justify-content: center; */
}

.header-h1{
    margin: 0px auto 0px 20px;
    padding: 10px 0px 0px 0px;
    width: 250px;
    height: 140px;
    
    
}

@media screen and (max-width: 767px) {
    .header-h1{
        margin: 0px 0px 0px 0px;
        padding: 20px 0px 0px 0px;
        width: 100%;
        max-width: none;
        background-color: rgb(255, 255, 255,1);
        
    }

}

.img-logo{
    width: 250px;
    height: auto;
    max-width: 250px;
    
    /* 227*53 */
    
}

@media screen and (max-width: 767px) {
    .img-logo{
        width: 95%;
        
    }
}

@media screen and (max-width: 320px) {
    .img-logo{
        width: 70%;
        
    }
}

.nav-main{
    margin: 0px auto 0px auto;
    width: 100%;
    max-width: 650px;
    height: inherit;
    display: flex;
    text-align:center;
    justify-content: flex-end;
    
    
    
}
@media screen and (max-width: 767px) {
    .nav-main{
        
        width: 100%;
        max-width: none;
        height: 100vh;
        display: block;
        z-index: 999;
        position: fixed;
        top: -100vh;
        background-color: rgba(255, 255, 255, 0.95);
        
    }

}

.nav-item{

    display: flex;
    align-items: flex-end;
    justify-content: center;
    
}

@media screen and (max-width: 767px) {
    .nav-item{
        display: block;
        
    }
}

.nav-main ul li{
    font-size: 16px ;
    width: 105px;
    margin: 0px 12px 35px 12px ;
    
}

@media screen and (min-width: 768px) and (max-width: 895px) {
    .nav-main ul li{
        width: 60px;
    }
}

@media screen and (max-width: 767px) {
    .nav-main ul li{
        margin: 15% 15px 15% 15px ;
        width: 100%;
    }
}

/***************************************/
/*伸びる線*/

.nav-main ul li a{
    display: block; /*伸びる線*/
    position: relative; /*伸びる線*/
}

.nav-main ul.current a,
.nav-main ul a:hover{
	color:#333399;
}

.nav-main ul a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#333399;
    /*アニメーションの指定*/
    transition: all 1.0s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform: scale(1, 0);/*X方向0、Y方向1*//*伸ばしたいときは消す*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.nav-main ul.current a::after,
.nav-main ul a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
    
}

/*伸びる線*/
/***************************************/

/***************************************/
/* ハンバーガーメニュー */

.hamburger-box{
    display: flex;
    justify-content: end;
    margin-right: 5px;
}

.header__hamburger {
    position: absolute ;
    margin: 0px 0px 0px 0px;
    width: 48px;
    height: 100%;
  }
  
   .hamburger {
    background-color: transparent;
    border-color: transparent;
    z-index: 9999;
  } 
  
  @media screen and (min-width: 768px) {
    .hamburger {
      display: none;
    }
  }
  
  /* ハンバーガーメニューの線 */
  .hamburger span {
    width: 100%;
    height: 4px;
    background-color: #071F32;
    border-radius: 4px ;
    position: relative;
    transition: ease .4s;
    display: block;
  }
  
  .hamburger span:nth-child(2) {
    margin: 2px 0;
    top: 0;
  }
  
  .hamburger span:nth-child(3) {
    margin: 8px 0;
  }
  
  .hamburger span:nth-child(4) {
    top: 0;
  }
  
  
  /* ハンバーガーメニュークリック後のスタイル */
  .header__nav.active {
    transform: translateX(0);
  }
  
  .hamburger.active span:nth-child(2) {
    top: 14.5px;
    transform: rotate(45deg);
  }
  
  .hamburger.active span:nth-child(3) {
    opacity: 0;
  
  }
  
  .hamburger.active span:nth-child(4) {
    top: -7.5px;
    transform: rotate(-45deg);
  }

/* js function "menuToggle" starting only */
.nav-main.active{
    top: 140px;
    transition: ease 1.0s;
}
/* ハンバーガーメニュー */
/***************************************/

/***************************************/
/***************************************/
/**************header*******************/
/***************************************/
/***************************************/

/***************************************/
/***************************************/
/**************footer*******************/
/***************************************/
/***************************************/

footer{
    display: block;
    justify-content: center;
}

.footer-back1{
    background: linear-gradient(to bottom, transparent, #ffffff);
}

.footer-back2{
    background-color:  #ffffff;
    padding-bottom: 2px;
}

.footer-main{
    padding-top: 10px;
    margin: 0px auto 0px auto;
    width: 100%;
    max-width: 1920px;
    height: inherit;
    display: flex;
    text-align:center;
    justify-content: center;
    
    
    
}
@media screen and (max-width: 767px) {
    .footer-main{
        
        width: 100%;
        
    }

}

.footer-item{

    display: flex;
    align-items: flex-end;
    justify-content: center;
    
}

@media screen and (max-width: 767px) {
    .footer-item{
        display: block;
        
    }
}

.nav-footer ul li{
    font-size: 16px ;
    margin: 0px 15px 5px 15px ;
    
}

@media screen and (max-width: 767px) {
    .footer-main ul li{
        margin: 15% 15px 15% 15px ;
    }
}

.footer-text{
    padding-top: 20px;
    margin: 0px auto 0px auto;
    width: 100%;
    max-width: 1920px;
    display: block;
    text-align:center;
    justify-content: center;
}

p.fupper {
    font-size: 16px ;
    font-weight: bold;
    line-height: 1 ;
}

p.flower {
    font-size: 12px ;
    line-height: 1 ;
}


/***************************************/
/***************************************/
/**************footer*******************/
/***************************************/
/***************************************/


/***************************************/
main{
    padding-top: 140px;
}

.main-back{
    margin-bottom: 0px;
    width: 100%;
    height: 140px;
    display: flex;
    /* background-color: #fdfdfd; */
    align-items: center;
    
}

.main-title{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    text-align:left;
}

.line{
    width: 80%;
    max-width: 900px;
    height: 2px;
    content: "";
    background-color: #071F32;
    margin: 50px auto 50px auto;
}

/***************************************/
/***************************************/

.space-hight20{
    width: 100%;
    max-width: 1920px;
    height: 20px;
}

.space-hight40{
    width: 100%;
    max-width: 1920px;
    height: 40px;
}

.space-hight60{
    width: 100%;
    max-width: 1920px;
    height: 60px;
}

.space-hight80{
    width: 100%;
    max-width: 1920px;
    height: 80px;
}


.space-hight100{
    width: 100%;
    max-width: 1920px;
    height: 100px;
}

.maincolor{
    color:#071F32;
    }

.c-gray{
    color:#555555;
    }

.c-white{
    color:#ffffff;
    }

.ctr {
    text-align: center ;
    margin: 0 auto;
}

.right {
    text-align: right ;
}

.left {
    text-align: left ;
}

.fontsize32{
    font-size: 32px ;
}

.fontsize42{
    font-size: 42px ;
}

.fontsize46{
    font-size: 46px ;
}

.fontsize52{
    font-size: 52px ;
}

.fontsize64{
    font-size: 64px ;
}

.fontweight500{
    font-weight: 500;
}

.fontweight900{
    font-weight: 900;
}

.t-padding20{
    padding-top: 20px;
}

.t-padding100{
    padding-top: 100px;
}


.b-padding20{
    padding-bottom: 20px;
}

.b-padding40{
    padding-bottom: 40px;
}

.l-padding70{
    padding-left: 70px;
}

.t-margin20{
    margin-top: 20px;
}

.t-margin40{
    margin-top: 40px;
}

.t-margin70{
    margin-top: 70px;
}

.t-margin80{
    margin-top: 80px;
}

.b-margin20{
    margin-bottom: 20px;
}

.b-margin40{
    margin-bottom: 40px;
}


.l-margin5{
    margin-left: 5px;
}

.l-margin50{
    margin-left: 50px;
}

.l-margin100{
    margin-left: 100px;
}

.l-margin150{
    margin-left: 150px;
}

.l-margin200{
    margin-left: 200px;
}

.l-margin250{
    margin-left: 250px;
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:3s;
    animation-delay: 0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    /* 下から */
    
    .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:3s;
    animation-delay: 0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(300px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }
    
    /* 上から */
    
    .fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:3s;
    animation-delay: 0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeDownAnime{
      from {
        opacity: 0;
      transform: translateY(-300px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }
    
    /* 左から */
    
    .fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:3s;
    animation-delay: 0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
      transform: translateX(-300px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }
    
    /* 右から */
    
    .fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:3s;
    animation-delay: 0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
      transform: translateX(300px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }

/*==================================================
パタッ
===================================*/

/* 下へ */
.flipDown{
    animation-name:flipDownAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes flipDownAnime{
      from {
        transform: perspective(2500px) rotateX(100deg);
      opacity: 0;
      }
    
      to {
        transform: perspective(2500px) rotateX(0);
      opacity: 1;
      }
    }
    
    
    /* 左へ */
    .flipLeft{
    animation-name:flipLeftAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    perspective-origin:left center;
    opacity:0;
    }
    
    @keyframes flipLeftAnime{
      from {
       transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
      opacity: 0;
      }
    
      to {
      transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
      opacity: 1;
      }
    }
    
    
    /* 左上へ */
    .flipLeftTop{
    animation-name:flipLeftTopAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes flipLeftTopAnime{
      from {
       transform: translate(-20px,80px) rotate(-15deg);
      opacity: 0;
      }
    
      to {
       transform: translate(0,0) rotate(0deg);
      opacity: 1;
      }
    }
    
    /* 右へ */
    .flipRight{
    animation-name:flipRightAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    perspective-origin:right center;
    opacity:0;
    }
    
    @keyframes flipRightAnime{
      from {
       transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
      opacity: 0;
      }
    
      to {
      transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
      opacity: 1;
      }
    }
    
    /* 右上へ */
    .flipRightTop{
    animation-name:flipRightTopAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes flipRightTopAnime{
      from {
       transform: translate(-20px,80px) rotate(25deg);
       opacity: 0;
      }
    
      to {
       transform: translate(0,1) rotate(0deg);
      opacity: 1;
      }
    }