@charset "utf-8";

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

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-print-color-adjust: exact;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  width: 100%;
  position: absolute;
  top:0;
  background-color: #1c1c1c;
}

body,div,ul,li,a,h1,h2,h3,h4,p,span,dl,dd,dt,tr,th,td,input,textarea{
  font-size: 18px;
  font-family: 'Roboto','YuGothic', '游ゴシック',"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
  color: #323232;
  text-decoration: none;
  list-style:none;
  text-align: justify;
  text-justify: inter-ideograph;
  font-feature-settings : "palt";
  letter-spacing: .65px;
  font-weight:normal;
  letter-spacing: 0.05em;
  line-height:1.65;
}

body, html {
  /* important */
  height: 100%;
  line-height:1.5;
}

a {
  color: #373737;
  text-decoration: none;
  line-height:1.5;
}

::selection {background: #9dd5db; color: #fff;}
::-moz-selection {background: #9dd5db; color: #fff;}

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

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}




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

Main components 

-------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.tx_center{
  text-align: center;
}

.gray{
  color: #626262;
}

.center{
  margin: 0 auto;
  text-align: center;
  width:100%;
}

.bold{
  font-weight: bold;
  font-weight: 700;

}

svg {
  fill: currentColor;
}

/*パソコン版*/ 
@media screen and (min-width : 801px){

.sp{
     display : none !important;
}
}

/*スマホ版*/
@media screen and (max-width : 800px){

.pc{
     display : none!important;
}		
}