/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}

@charset "UTF-8";

/**
 * reset
 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
  margin: 0;
}

body {
  color: #252525;
  font-family: "游ゴシック体 Medium", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background: #fff;
  text-align: left;
}

ol, ul {list-style: none;}
a {text-decoration: none;color:#252525;}
p {font-size: 18px;color:#252525;}
@media (max-width: 769px){
  p {font-size: 14px;}
  li{font-size: 12px;}
}


/* 改行指定 ---------------------------------------*/
@media (min-width: 769px){ 
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media (max-width: 768px){ 
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/* float ---------------------------------------*/
.float_r{float: right;}
.float_l{float:left;}
@media (max-width: 768px) {.float_r,.float_l{float:none;}}
.float_end{clear:both;}


/* font color ---------------------------------------*/
.color_blue{color:#0097dc;}
.color_green{color:#00b2af;}
.color_pink{color:#ff3f90;}

/* display設定 ---------------------------------------*/
.pc_only{}
.sp_only{display: none;}
@media (max-width: 768px) {
  .pc_only{display:none;}
  .sp_only{display: block;}
}



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

　バーガーメニュー

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

  header{
    width:100%;
    text-align: center;
  }

.fix-header {
  background-color:#fff;
  height: 60px;
  top: -60px;/* 上に隠す鷹さ */
  left: 0;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  color: #fff;
  position: fixed;
  opacity:0;/*  最初読み込んだときは透過 */
  z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */
/*  opacity: 0; */
  }

  .fix-header-contents{
    width:800px;
    margin: 0 auto;
  }

.fix-header ul{
list-style-type: none;
}

.fix-header li{
  float:left;
  margin-right:32px;
}

.fix-header li a,.fix-header li a:visited{
  color: #252525;
  letter-spacing: 0.05em;
  font-size: 20px;
  font-weight:bold;
  text-decoration: none;

}
.fix-header li:last-child{
  margin-right:0;
}
#fix-header-logo{
  float:left;
}

#fix-header-logo img{
width:54px;
}

#fix-header-menus{
  float:right;
  text-align: right;
}
#scroll-fix-menu img{
padding-bottom: 5px;
   border-bottom:2px solid #fff;
}

#scroll-fix-menu .current-menu-item img{
   border-bottom:2px solid #0f142a;
}

#scroll-fix-menu a img:hover{
   border-bottom:2px solid #0f142a;
  transition:border-color 0.6s ease-out;
}

/* micro clearfx */
.cf:before, .cf:after {
    content:"";
    display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* For IE 6/7 */

  nav{
    width:100%;
  }
  .nav-container{
    width:800px;
    margin: 0 auto;
  }
  
  nav ul{
    padding:0;
    list-style: none;
  }
  
  nav ul li{
    float:left;
    margin:15px 40px 15px 0;
  }
  
  nav ul li a,nav ul li a:visited{
    color: #fff;
    text-decoration: none;
  }
  
  article{
    width:800px;
    margin:20px auto ;
  }


@media (max-width: 768px) {
  .fix-header li{float:none;margin-right:32px;width: 100%;}
} 



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

　バーガーメニュー

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

@media (max-width: 768px) {
  header {display: block;height: 54px;top:0;left:0;}
  nav {
    margin-left: 0;
    height: auto;
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -502px;
    left: 0;
    background: #fff;
    width: 100%;
    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;}
  nav ul li:first-child{padding-top: 100px;}
  nav ul li a {text-align: left;width: 100%;display: block;padding: 8px 0 8px 20px;font-weight: bold; font-family: "游ゴシック体 Medium", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
  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: #252525;
    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);
  }
}

.head_sns_pc{float:right;margin-top: 7px;margin-left:-10px; }
#nav_insta{font-size: 30px;}
#nav_fb{font-size: 30px;}
a#nav_insta:hover{color: #e50091;transition: .2s;}
a#nav_fb:hover{color: #3B5998;transition: .2s;}

.head_sns_sp{display:none;}
#nav_insta{font-size: 30px;}
#nav_fb{font-size: 30px;}
.bar{display: none;}


@media (max-width: 768px) {
  .head_sns_pc{display:none;}
  .head_sns_sp{float:left;margin-top: 5px;margin-left:10px;display: block;position: absolute;z-index: 1000;}
  .bar{display: block;width: 100%;height: 60px;position: absolute;z-index: 900;background: #fff;}
} 

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

◆　ページトップへ

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

#pageTop {
    position: fixed;
    bottom: 37px;
    right: 32px;
    font-size: 1.1rem;
    z-index: 9999;
}
#pageTop a {
    display: block;
    z-index: 999;
    padding: 10px 16px;
    text-decoration: none;
    text-align: center;
    border-radius: 50px;
    border:1px solid #ccc;
    background: #fff;
    color:#222;
    transition: all .2s ease;
}
#pageTop a:hover {
    color:#fff;
    padding: 10px 16px;
    background: #222;
    text-align: center;
    transition: all .2s ease;
}
@media(max-width: 768px){
  #pageTop{ bottom: 20px;right: 12px;}
  #pageTop a {padding: 10px 16px;}
  #pageTop a:hover{padding: 10px 16px;}
  
}

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

◆　footer

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


footer{padding: 40px 0 120px;background: #fff;width: 100%;text-align: center;}
footer a{font-size:26px;letter-spacing: 0.1em;font-weight: bold;}

@media (max-width: 768px) {
  footer{padding: 0 0 60px;}
  footer a{font-size:15px;letter-spacing: 0.05em;font-weight: bold;}
}