@charset "utf-8";

html,body { text-align: left; margin: 0; padding: 0; font-size: 13px; color:#FFF; background-color:#0092d7; line-height:100%;}
html,body { font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;	/*font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;*/}
html,body { font-family: fot-tsukuardgothic-std, sans-serif; font-style: normal; font-weight: 400; font-feature-settings: "palt"; letter-spacing: 0.15em;}
html,body strong { font-weight: 700;}

img { -ms-interpolation-mode:bicubic;}
area { border:none; outline:none; }

video { position: absolute; z-index: 1; min-width: 100%; min-height:100%; top:50%; left:50%; background-size: cover;}

/*-------------------
@preloader
-------------------*/
#preloader { width:100%; height:100%; position:fixed; z-index:1001; top:0px; left:0px; right:0px; bottom:0px; background:#feeb09;}
#preloader-anime { position:absolute; z-index:3; top:50%; left:50%; margin:-16px 0 0 -16px;}
#percent-text { position:absolute; z-index:4; top:50%; left:50%; margin:17px 0 0 -15px;; text-align:center; width:30px}
#percent-text { font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , sans-serif; color: #ccc; }

/*-------------------------------
@SNS
-------------------------------*/
.rollover:hover { filter:brightness(120%); transition: all 0.5s;}
.rollover2:hover { opacity:0.8; transition: all 0.5s;}

/*-------------------------------
@MENU
-------------------------------*/
header { width:100%; background: #FFF; height: 60px; overflow: hidden;}
header h1 { float: left; margin: 12px 0 0 30px;}

header ul { float: right; height: 30px; margin: 15px 20px 0 0}
header li { float: left; margin-right: 10px;}

@media screen and (min-width : 641px ){
	
	header li:first-child:after { float: right; content:" "; display:inline-block; width:2px; height:30px; background:url(../img/line.png) top center no-repeat; background-size:contain; margin: 0 10px 0 20px;} 
	
	#social-container { position: absolute; right: 30px; top: 80px; z-index: 999;}
	#social-container li {float: left; margin-left: 10px; display:block; height:20px;}
	
  header .menu, #drawer #sp-menu { display: none;}
  html,body { min-width: 1000px;}
  .br-pc { display:none;}
}

@media screen and (max-width: 640px) {
  html,body { font-size: 20px; letter-spacing: 0.1em;}
  
	header #pc-tel{display: none;}
	.br-sp { display:none;}
	
	header { width: 640px; height: 100px; position: fixed; top:0; left:0; z-index: 100;}
  header h1 { margin: 20px; width: 326px; height: 60px;}
  header h1 img {width: 100%; height: 100%;}
	
	header ul { height: 56px; margin: 22px 0 0 0; }
	header li:nth-of-type(2) { margin-right: 15px;}
	header li img { width: 56px; height: 56px;}
	
  header .menu { height: 100px; width: 100px; position: relative; color: #0092d7; text-align: center; display: inline-block; float: right; }
	
  header .menu.active .menuInner span { background-color: transparent; }
  header .menu.active .menuInner span:before { transform: rotate(45deg); }
  header .menu.active .menuInner span:after { transform: rotate(-45deg); }
  header .menu span.name { position: absolute; display: inline-block; top:60px; left: 0; width: 100%; font-weight: bold}
  header .menu.active span.name:before { content: 'Close'; letter-spacing: 0.1em;}
  
  header .menu .menuInner { width: 60px; height: 80px; position: relative; margin: 20px auto 0; }
  header .menu .menuInner span { display: inline-block; position: absolute; left: 0; top: 12px; height: 4px; width: 100%; background-color: #0092d7; border-radius: 2px; }
  header .menu .menuInner span:before, header .menu .menuInner span:after { content: ''; display: inline-block; position: absolute; left: 0; height: 4px; width: 100%; background-color: #0092d7; border-radius: 2px; will-change: transform; transition: transform 0.4s ease-out; }
  header .menu .menuInner span:before { transform: translateY(-12px); }
  header .menu .menuInner span:after { transform: translateY(12px); }
  header .menu span.name:before { content: 'MENU'; letter-spacing: 0.1em;}

  .fixed { position: fixed;  width: 100%; height: 100%;}
	
  #drawer { width: 640px; text-align: center; background-color:#FFF; display: none; height: 100%; position: fixed; top: 100px; left: 0; z-index: 999; font-size: 28px; font-weight: bold; overflow-y: scroll; -webkit-overflow-scrolling:touch; }
  #drawer > ul li a { width: 480px; line-height: 100px; height: 100px; color: #0092d7; border-bottom: 2px dotted rgba(0,146,215,1); display: block; text-decoration:none; margin: 0 auto; }
  #drawer > ul li:first-child a { margin: 40px auto 0; }
  #drawer > ul .box a { margin: 60px auto 120px; border:2px solid rgba(0,146,215,1.0); border-radius: 15px; height: auto; padding: 30px 0; line-height: inherit;}
  
  #social-container { line-height:inherit; font-size: 10px; display: table; padding-bottom: 80px; margin: 0 auto; transform: scale(2); -webkit-transform: scale(2);}
  #social-container li { float: left; padding: 0 5px;}
}