@charset "UTF-8";
/* CSS Document */

/*----------------------------------------------------

  表示設定

----------------------------------------------------*/
@media(min-width: 769px){ 
  .pc { display:block;max-width:1100px;width: 100%;margin: 0 auto;text-align: center;}
  .pc img{ max-width:1100px;width: 100%;height: auto;}
  .sp { display:none; }
}
@media(max-width: 768px){ 
  .pc { display:none; }
  .sp { display:block;width: 100%;height: auto; }
  .sp img { width: 100%;height: auto; }
}

/*----------------------------------------------------

  背景画像・背景色

----------------------------------------------------*/
.bg_fixed{height:500px;width:100%;background:url(../img/pc_img_bg1.jpg)center center no-repeat;background-attachment: fixed;background-color: #555;}
@media(max-width: 768px){.bg_fixed{display: none;}}
.menu_bg{background: linear-gradient(to right, #ff01a2 58.7999%, #41b5f2 58.8%, #41b5f2 91.1999%, #ff01a2 91.2%, #ff01a2);}

@media(min-width: 769px){
  .bg_pink{background: #ff01a2;}
  .bg_gray{background: #e1e1e1;}
  .bg_blue{background: #3db4f6;}
  .bg_black{background: #000;}
}

/*----------------------------------------------------

　ヘッダースクロール後固定

----------------------------------------------------*/
.navi_fixed{
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 1000;
    background: #ff01a2;
  }

/*----------------------------------------------------

  pagetop

----------------------------------------------------*/
#pageTop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pageTop a {
    display: block;
    z-index: 999;
    padding: 12px 17px 18px;
    background: #333;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    opacity: 0.7;
    transition: .1s;
}
#pageTop a:hover {
    text-decoration: none;
    opacity: 0.5;
    transition: .1s;
}

/*----------------------------------------------------

　バーガーメニュー

----------------------------------------------------*/

header {display: none;position: fixed;z-index: 900;right: 0;}
@media (max-width: 768px) {
  header {display: block;height: 54px;position: absolute;top:0;left:0;}
  nav {
    margin-left: 0;
    height: auto;
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -502px;
    left: 0;
    background: #000;
    width: 100%;
    text-align: center;
    padding: 0 0 0;
    transition: .3s ease-in-out;
    z-index: 600;
  }
  nav ul {display: block;right: 0;bottom: 0;top: 0;}
  nav ul li{padding-top:0px;border-bottom:1px solid #ccc;}
  nav ul li:first-child{padding-top: 100px;}
  nav ul li a {width: 100%;display: block;padding: 25px 0;}
  nav ul li a img{max-width: 230px;width: 80%;}
}
/* ----- トグルボタン ----- */

#nav-toggle {
  display: none;
  position: absolute;
  right: 12px;
  top: 14px;
  width: 30px;
  height: 34px;
  cursor: pointer;
  z-index: 9999;
}
@media (max-width: 768px) {
  #nav-toggle {display: block;}
}

#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    border-radius: 0;
    background: #FF00A0;
    left: 0;
    transition: .3s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 10px;}
#nav-toggle span:nth-child(3) {top: 20px;}

@media (max-width: 768px) {
  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(466px);
    -webkit-transform: translateY(466px);
    transform: translateY(466px);
  }
}

.fixed{position: fixed;}