@charset "UTF-8";

body {
  line-height: 1.8;
  font-size: 16px;
  font-family: "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  color:#333;
  overflow-x: hidden;
  font-feature-settings: "palt";
}

@media screen and (max-width: 900px) {
  body {
    font-size: 14px;
  }
  }


img{
  max-width:100%;
  vertical-align: bottom;
  height:auto;
}

.br-pc {
  display: block;
}

@media (max-width: 600px) {
  .br-pc {
      display: none;
  }
}

.br-sp {
  display: none;
}


@media (max-width: 600px) {
  .br-sp {
      display: block;
  }
}

.header {
  width: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 1000;
  display: flex;
  height:60px;
  background:#fff;
}

.logo_wrap{
  display:flex;
  flex-direction: row;
  margin:0 0 0 20px;
  align-items:center;
  width:100px;
}

.pc{
  display:block;
}

@media screen and (max-width: 900px) {
.pc{
    display:none;
  }
  }

nav {
  margin: 0 0 0 auto;
}

.g_menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.g_menu a {
  text-decoration: none;
  display: flex;
  height: 60px;
  padding: 15px 20px;
  font-size: 14px;
  transition: all 0.3s ease;
  align-items: center;
  font-weight:600;
}

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

  .g_menu a {
    padding: 7px 20px;
    height:auto;
  }
}

.g_menu a:hover {
  opacity:0.7;
}

.g_menu-dl{
  position:relative;
  color:#fff;
}

.g_menu-dl:before{
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background:#0084cc;
    transform: skew(-30deg);
    transition: 0.5s linear;
}

@media screen and (max-width: 900px) {
.g_menu-dl:before{
    background:#0084cc;
    transform: skew(0);
    transition: 0.5s linear;
}
}

.g_menu-contact{
  color:#fff;
  position:relative;
}

.g_menu-contact:before{
  content: '';
  position: absolute;
  top: 0;
  left: -10%; /* 左に少しはみ出す */
  right: -20%; /* 右にも少しはみ出す ← 重要 */
  bottom: 0;
  background: #253285;
  transform: skew(-30deg);
  z-index: -1;
}

@media screen and (max-width: 900px) {
.g_menu-contact:before{
  content: '';
  position: absolute;
  top: 0;
  left: -10%; /* 左に少しはみ出す */
  right: -20%; /* 右にも少しはみ出す ← 重要 */
  bottom: 0;
  background: #253285;
  transform: skew(0deg);
  z-index: -1;
}
}

.sm {
  display: none;
}

/**********************************　
パンくずリスト
************************************/

.breadcrumb{
    margin:70px 0 50px;
}

@media screen and (max-width: 900px) {
  .breadcrumb{
    margin:0 0 7px;
}
}

.breadcrub_block{
  max-width: 870px;
  padding: 53px 0 0;
  margin: 0 auto;
}

@media screen and (max-width: 900px)
{
  .breadcrub_block{
      margin: 53px 8px 0;
  }
}

.breadcrumb_list{
  display:flex;
  flex-wrap:wrap;  
  font-size:12px;
}

.breadcrumb_item{
  position:relative;
  padding: 0 20px 0 0;
  display: inline-block;
}

.breadcrumb_item a{
  color:#253285;
  text-decoration: underline;
}

.breadcrumb_item:after{
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 4px;
  height: 4px;
  margin: auto;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.breadcrumb_item:last-child:after{
  display:none;
}


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

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

  #hamburger {
    background-color: transparent;
    position: relative;
    cursor: pointer;
    margin: 0 0 0 auto;
    height: 60px;
    width: 60px;
  }

  .icon span {
    position: absolute;
    left: 15px;
    width: 30px;
    height: 4px;
    background-color: #000;
    border-radius: 8px;
    transition: ease 0.75s;
  }

  .icon span:nth-of-type(1) {
    top: 16px;
  }
  .icon span:nth-of-type(2) {
    top: 28px;
  }
  .icon span:nth-of-type(3) {
    bottom: 16px;
  }

  .close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 28px;
  }

  .close span:nth-of-type(2) {
    opacity: 0;
  }

  .close span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 28px;
  }

  .sm {
      top: 60px;
      left: 0px;
      position: absolute;
      z-index: 10;
      width: 100%;
      background:#fff;
  }

 .g_menu {
    flex-direction: column;
  }

  .g_menu a {
    text-align: center; 
    border-top: solid 0.5px rgba(255, 255, 255, 0.6);
  }
}
 
 .inner{
    max-width:1280px;
    margin:0 auto;
   }
  
   @media screen and (max-width: 900px) {
    .inner{
      padding:16px 16px 0;
      margin:auto;
      overflow: hedden;
     }
    }

  .section {
    height: 100vh;
  }
  
  .section-a {
    background: #000;
  }
  
  .section-b {
    background: #fff;
  }
  
  /**********************************　
フッター
************************************/

  .footer_nav{
    padding: 30px 15px 30px;
    background:url(../img/cta_bg.png) center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  @media screen and (max-width: 900px) {
    .footer_nav{
      display:none;
    }
  }

  .footer_menu_wrap{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
  }

.footer_menu{
  display:flex;
  flex-direction:row;
  }

.footer_menu a{
  color:#c2c2c2;
  font-weight:600;
  text-decoration:none;
}

.footer_menu a:hover{
  opacity:0.7;
  transition:all 0.3s ease;
}

.footer_menu_list{
  margin-right:50px;
  color:#c2c2c2;
  font-size:14px;
}

.footer_menu_item{
  margin-bottom:7px;
}

.footer_privacy{
  padding: 10px 0;
  border-top: 1px solid rgb(51, 51, 51);
}

.footer_privacy_list{
  display:flex;
  flex-direction:row;
  justify-content: center;
 font-size:12px;
 font-weight:600;
}

@media screen and (max-width: 900px) {
  .footer_privacy_list{
    flex-direction:column;
    text-align:center;
  }
}

.footer_privacy_item:not(:last-child){
  margin-right:30px;  
}

@media screen and (max-width: 900px) {
  .footer_privacy_item:not(:last-child){
    margin:0 0 15px 0;  
  }
}

  .anime{
    transform: translateY(100px);
    transition:all .5s ease-in;
  }
  
  .animestart{
    transform: translateY(0);
  }

/**********************************　
バナー
************************************/



.floating-banner {
  position: fixed; 
  z-index: 99999; 
  bottom: 0; 
  right: 0; 
  width: 358px;
}
.floating-banner__image {
  max-width: 100%; 
}
@media screen and (max-width: 980px) {
  .floating-banner {
    display: none;
  }
}

@media screen and (max-width: 560px) { 
  .floating-banner {
    display: block;
    width: 100vw; 
  }
}

.banner-close {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 4px 8px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  color:#000;
  z-index:999999;
}

.hidden{
  display:none;
}

/**********************************　
ライン
************************************/

.common_underline{
  background: linear-gradient(transparent 60%, #c8e5f5 0%);
}

/**********************************　
リンク
************************************/

.common_link{
    color: #0696d7;
    text-decoration: none;
}

.common_link_arrow{
  display: block;
  position: relative;
    color: #0696d7;
    padding-left: 14px;
    margin: 0 0 5px;
}

.common_link_arrow:before{
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -3px;
}

.common_attention_list{
  margin-bottom:50px;
}

.common_attention{
  padding-left: 1em;
  text-indent: -1em;
  font-size:14px;
  color:#797979;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/**********************************　
テキストインデント
************************************/
.common_indent{
    text-indent: -1em;
}
/**********************************　
背景
************************************/
.common_bg_gray{
  background:#f0f1f5;
}

/**********************************　
文字カラー
************************************/
.common_blue{
  color:#253285;
}