/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

* {-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
 }


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*SP -767px display */
.container {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin: auto;
}

.container-inner{padding: 0;}

.container-fluid{
  background-color: #fff;
  width:100%;
  margin:0 auto;
}

  .container-intro{
    width: 100%
  }

.column,
.columns,
.column_sub{
  width: 100%;
  float: left;
  box-sizing: border-box; }

.column_sub{
  width: 100vw; }

  
  /*SP時のContainerの外側にコンテンツ表示用。（SP時のwidth=100vw用）*/
  .breaking-out {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
  }
  .section-container {
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
  }

   
/*SP時非表示用*/
.pc_disp{display: none;}
/*PC時非表示用*/
.sp_disp{display: block;}

/* PC 768-1149px display */
/* Scroll bar +20px */
@media (min-width: 788px) {
    .container {
      width: 990px;
      margin-right: -2.5rem;
      margin-left: -2.5rem;
      margin: 0 auto
    }
    .container-inner{
      width: 940px;
    }
    .container-fluid{
      margin: 0 auto
    }

    .container-fluid-SPw100{
      width: 990px;
      padding-right: 2.5rem;
      padding-left: 2.5rem;
    }

    .column{
      margin-left: 0; }
    .columns {
       margin-left: 10px; }
    .column_sub{
    margin-left: 10px; }
    .column:first-child,
    .columns:first-child,
    .column_sub {
        margin-left: 0; }

  .six.column,
  .six.columns,
  .six.column_sub                    { width: 465px;}

  .twelve.columns                 { width: 100%; margin-left: 0;}

/*Sidemenu用*/
.one-third.column      { width: 100%; margin-top:4rem;}
.two-thirds.column      { width: 100%;}

.one-half.columns                { width: 48%; }

.one-half.column_sub      { width: 390px; }

/*News list用*/
.two.columns                    { width: 12%; }
.ten.columns                    { width: 86%; }

/*SP時のContainerの外側にコンテンツ表示用。（SP時のwidth=100vw用）*/
.breaking-out {
  margin-right: calc(0% - 0vw);
  margin-left: calc(0% - 0vw);
}
.section-container {
  padding-right: calc(0vw - 0%);
  padding-left: calc(0vw - 0%);
}

/*PC時表示用*/
.pc_disp{display: block;}
/*PC時非表示用*/
.sp_disp{display: none;}

}



/* PC 1150px display */
/* Scroll bar +20px */
@media (min-width: 1170px) {
  .container {
    width:100%;
    max-width:1150px;
  }
  .container-inner{
    width:100%;
    max-width:1150px;
  }
  .container-fluid{
    margin: 0 auto
  }
  .container-fluid-SPw100{
    width:100%;
    max-width:1150px;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
    margin: auto 0;
  }

  /*2column - two-third側内2column構成用
  sidemenu有りページ用*/
  .column {
    margin-left: 40px; }
    
  /*1column 用*/
  .columns {
     margin-left: 40px; }

  /*1column 用*/
  .columns {
    margin-left: 40px; }
    
  .column_sub{
    margin-left: 10px;
  }

  .column:first-child,
  .columns:first-child,
  .column_sub {
      margin-left: 0; }

.six.columns                    { width: 530px;}

.twelve.column,
.twelve.columns         { width: 100%;  margin-left: 0; }

/*Sidemenu用*/
.one-third.column{ 
  width: 270px; margin-top:0; }
.two-thirds.column{
  width: 790px;}
/*Sidemenuのあるページ内のさらに半コンテンツ部分*/
.six.column,
.six.column_sub                    { width: 390px;}

.one-half.columns,
.one-half.column_sub             { width: 48%;margin-left: 0; }


/*News list用*/
.two.columns                    { width: 12%; }
.ten.columns                    { width: 82%; }



}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Note––––––––––––––––––––––––––––––––––––––––––––
html is set to 62.5% so that all the REM measurements throughout basestyle
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  margin: 0;
  font-size: 1.6rem; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5;
  font-weight: 300;
  font-family: "Noto Sans",Arial, sans-serif;
  color: #333; 
  position: relative;
}
img{
  -ms-interpolation-mode: bicubic;
  backface-visibility:hidden;
  -webkit-backface-visibility: hidden;
  height: auto;
  width: auto;
}



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.bold{
  font-weight: bold;
}

.ff_patua{
  font-family: 'Patua One',sans-serif;
}

h1,.h1,h2,.h2 , h3,.h3 , h4,.h4 , h5,.h5 , h6,.h6{
  margin-top: 0;
  margin-bottom: 1.6rem;
  font-family: 'Patua One',sans-serif;
  font-weight: 300;
}

h1,.h1{
  margin-top: 0;
}

h2,.h2{
  color: #43607c; 
  margin-bottom:1rem;
}


h1,.h1 { font-size: 3.8rem; line-height: 1.5;  letter-spacing: 0.1rem;}
h2,.h2 { font-size: 2.6rem; line-height: 1.4; letter-spacing: 0.1rem; }
h3,.h3 { font-size: 2.0rem; line-height: 1.1;  letter-spacing: 0.2rem; }
h4,.h4 { font-size: 1.6rem; line-height: 1.0; letter-spacing: 0.1rem; }
.breadcrumb  { font-size: 1.4rem; line-height: 1.5; letter-spacing: 0; }
.txt-s { font-size: 2.6rem;}

body p {
  margin-top: 0;
}

/* PC 768-1149px display */
@media (min-width: 788px) {
  h1,.h1{padding: 1.5rem 0; }
  h1,.h1 { font-size: 5.6rem; }
  h2,.h2 { font-size: 2.8rem; }
  h3,.h3 { font-size: 2.0rem; }
  h4,.h4 { font-size: 1.8rem; }
  h5,.h5 { font-size: 1.6rem; }
  .breadcrumb  { font-size: 1.4rem; }
  .txt-s { font-size: 4.0rem;}


  h1,.h1,h2,.h2 , h3,.h3 , h4,.h4 , h5,.h5 , h6,.h6{
    margin-top: 0;
    margin-bottom: 2rem;
    font-family: 'Patua One',sans-serif;
    font-weight: 300;
  }
  
  h1,.h1{
    margin-top: 0;
  }
  
  h2,.h2{
    color: #43607c; 
    margin-bottom:1.4rem;
  }

  

p {
  margin-top: 0;
}

}

@media (min-width: 1170px) {
.two-thirds h1{
  margin-top:0;
  padding-top: 0;
}
}

/*
Page上部戻り用ボタン内文字

・OurProjectのProject名 h3
・ProjectのSub content用 h3
・Projectの各プロジェクト下部のProject名List用 h3 h4
・project_Datail のタイトル周り用 h3 h4 h5
・sidemenuのタイトル部 h3
・project_Datail  OtherProject タイトル用h3
・news_listの h2
・Company内のPと部分

上記はcustom.css
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #003399;
  text-decoration: none;
}

a:hover {
  color: #003399;
  text-decoration: underline;
}




/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: disc inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }
  
.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #efefef;
  border: 1px solid #999;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }





/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }

.u-pull-right {float: right;}
.u-pull-left {float: left;}
.u-center{margin:0 auto;}

  

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin: 2rem 0;
  border-width: 0;
  border-top: 1px solid #999; }

.hr_dot{
  margin:0 0 2.6rem 0;
  border-top:0;
  height: 4px;
  background-image: linear-gradient(
    90deg,
    hsla(209, 46%, 47%, 1),
    hsla(209, 46%, 47%, 1) 10%,
    hsla(209, 46%, 47%, 0) 10%,
    hsla(209, 46%, 47%, 0) 100%);
  background-size: 8px 100%;
}

.hr_f{
  width:100vw;
  height: 2px;
  background-color: #999;
  border-top: 1px solid #999;
}
.border_ContentTitle{
  width: 10rem;
  height: 0.3rem;
  margin: 0;
  text-align: left;
  background-color: #000;
  margin-bottom:3rem;
}

/* PC Display */
@media (min-width: 788px) {
  hr {
    margin: 1rem 0;
}
  
  .hr_dot{
    margin: 0rem 0 3.5rem 0;
  }

  
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.container-fluid:after,
.row:after{
  content: "";
  display: table;
  clear: both; }

  
  .clearfix:after {
    content: "";
    clear: both;
    display: block;
  }
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* PC Display */
@media (min-width: 788px) {}

@media (min-width: 1170px) {}