/* CSS Document */
/*  ------------------------------------------------------------------------------
Reset 
*/
button,html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,address,cite,code,em,img,small,strong,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figcaption,figure,footer,header,nav,section,summary,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}ul{list-style:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}table{border-collapse:collapse;border-spacing:0;}input,select{vertical-align:middle;outline:none;}a:focus::-moz-focus-inner,a:active::-moz-focus-inner,select:focus::-moz-focus-inner,select:active::-moz-focus-inneroption:focus::-moz-focus-inner,option:active::-moz-focus-innerbutton:focus::-moz-focus-inner,button:active::-moz-focus-inner{border:0;}hr{height:0;margin:0;padding:0;border:0;}small{font-size:1.2rem}input,select{-webkit-appearance: none;}i{font-style:normal;}
/*  -----------------------------------------------------------------------------------------------

Common

*/
html { font-size: 62.5%; background-color: #fff; }
body {
  font: 1.4rem/2.4 "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  color: #637080;
  letter-spacing: .12em;
  max-width: 2560px;
  -webkit-text-size-adjust: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}
/*  
SVG
*/
svg { color: inherit; transition: all 0.3s ease-in-out 0s; }
.site-header .svg_logo_header { fill: #637080; width: 164px; height: 48px; }
.site-header .svg_icon_close,
.site-header .svg_icon_search { stroke: #637080; width: 40px; height: 40px; }
main > h1 svg { stroke: #c18550; width: 100%; height: 100%; }
main article h2 svg { stroke: #fff; fill: none; width: 100%; height: 100%; }
footer svg { stroke: #fff; fill: none; width: 100%; height: 100%; }
#top .gnav svg { fill: #fff; stroke: #fff; width: 128px; height: 128px; }
/*  
Loading
*/
#loading {
  background: #636F7F;
  text-align: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#loading .svg_logo_loading {
  fill: rgba(255,255,255,.2);
  width: 160px;
  height: 44px;
  position: absolute;
  bottom: 40px;
  left: 49%;
  transform: translateX(-50%);
}
#loading .spinner {
  margin: 0 auto;
  width: 200px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#loading .spinner > div {
  width: 8px;
  height: 8px;
  margin: 0 8px;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
#loading .spinner .bounce1 { animation-delay: -0.32s; }
#loading .spinner .bounce2 { animation-delay: -0.16s; }
@keyframes sk-bouncedelay {
 0%, 80%, 100% { transform: scale(0); }
 40% { transform: scale(1.0); }
}