@charset "utf-8";

@font-face {
  font-family: "yosugara";
  src: url("/fonts/yosugara.ttf") format("truetype");
  src: url("/fonts/yosugara.woff") format("woff");
}
@font-face {
  font-family: "syokaki";
  src: url("/fonts/syokaki.ttf") format("truetype");
  src: url("/fonts/syokaki.woff") format("woff");
}

html, body{
    margin: 0;        
    padding: 0;       
    width:100%;
    height:100%;
    font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"ＭＳ Ｐゴシック",verdana,sans-serif;
}

/*----------- ロゴのフェードイン -------------*/
.logo_fadein{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9999;
}
.logo_fadein p {
	position: fixed;
	left: 43%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 99999;
	width: 280px;
}
/* --------------------------------------------------------- */

/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
  display: flex;
  flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
  margin:0 0 50px 0;
  list-style: none;
}

.gnavi li a{
  display: block;
  padding:10px 30px;
  text-decoration: none;
  color: #333;
}

.gnavi li{
  margin-bottom:20px;
}

/*==================================================
　5-3-6 左から右に線が伸びて背景になる
===================================*/

/*背景の設定*/

.gnavi li a{
  /*背景色の基点とするためrelativeを指定*/
position: relative;
  /*アニメーションの指定*/
transition: all .7s;
}

.gnavi li a::after {
content: '';
  /*絶対配置で線の位置を決める*/
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
  /*背景の形状*/
width: 0;
height: 1px;
background:#0481A2;
opacity: 0;/*はじめは透過を0に*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
  /*背景の形状*/
width: 100%;
opacity: 1;
  /*アニメーションの指定*/
animation:bgappear 0.5s forwards;
}

/*アニメーションで線を伸ばして背景をつける*/
@keyframes bgappear{
0% {
  width: 0%;
  height: 1px;
}
50% {
  width: 100%;
  height: 1px;
}
100% {
  width: 100%;
  height: 100%;
  background: #0481A2;
}
}

/*現在地とhoverの設定*/
.gnavi li.current a,
.gnavi li a:hover{
  color: #fff;
  /*テキストを最前面へ*/
z-index: 1;
}

/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
  top: 0;
  width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
  z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ff7b00b2;
    /*丸のスタート位置と形状*/
  transform: scale(0);/*scaleをはじめは0に*/
  right:-50px;
    top:-50px;
    transition: all 1.0s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
  transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
  opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
  text-align: center; 
  list-style: none;
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}


/*========= ボタンのためのCSS ===============*/

.container {
    width: 100px;
    height: 80px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
  }
  
  .stick {
    width: 80px;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color:  #01053d;
    display: inline-block;
  }
  
  .stick:last-child {
    margin-bottom: 0px;
  }
  
  .stick-1.open {
    animation: stick-1-open .6s ease-out forwards;
  }
  
  .stick-2.open {
    animation: stick-2-open .6s linear forwards;
  }
  
  .stick-3.open {
    animation: stick-3-open .6s linear forwards;
  }
  
  @keyframes stick-1-open {
    0%   {width: 80px;}
    40%  {background-color: #ff5e00; width: 8px; transform: translate(40px, 0px);}
    75%, 80%  {width: 8px; transform: translate(40px, -50px); animation-timing-function: cubic-bezier(0,1,1,1);}
    100% {background-color: #ff5e00; width: 8px; transform: translate(35px, 46px);}
  }
  
  @keyframes stick-2-open {
    80%  {background-color: #01053d; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #ff5e00; transform: translate(8px, 0px) rotate(40deg);}
  }
  
  @keyframes stick-3-open {
    80%  {background-color: #01053d; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #ff5e00; transform: translate(8px, -23px) rotate(-40deg);}
  }
  
  .stick-1.close {
    width: 8px; 
    transform: translate(27px, 26px);
    animation: stick-1-close .6s ease-out forwards;
  }
  
  .stick-2.close {
    transform: translate(0px, 0px) rotate(40deg);
    animation: stick-2-close .6s ease-out forwards;
  }
  
  .stick-3.close {
    transform: translate(0px, -23px) rotate(-40deg);
    animation: stick-3-close .6s ease-out forwards;
  }
  
  @keyframes stick-1-close {
    0%, 70% {width: 0px;}
    100%    {width: 80px; transform: translate(0, 0);}
  }
  
  @keyframes stick-2-close {
    0%   {background-color: #ff5e00; width: 80px;}
    20%  {background-color: #ff5e00; width: 8px; transform: translate(0, 0px) rotate(40deg);}
    40%  {background-color: #01053d; width: 0px;}
    65%  {transform: translate(0, -70px); animation-timing-function: cubic-bezier(0,1,1,1);}
    80%  {width: 0px;}
    100% {width: 80px; transform: translate(0, 0px);}
  }
  
  @keyframes stick-3-close {
    0%   {background-color: #ff5e00; width: 80px;}
    20%  {background-color: #ff5e00; width: 8px; transform: translate(0, -23px) rotate(-40deg);}
    40%  {background-color: #01053d;}
    65%  {transform: translate(0, -93px); animation-timing-function: cubic-bezier(0,1,1,1);}
    90%  {width: 8px;}
    100% {width: 80px; transform: translate(0, 0px);}
  }



/*========= レイアウトのためのCSS ===============*/

header{
    width: 100%;
    height: 75px;
    float: left;
    position: fixed !important;
    position: absolute;
    background: #ffffff;
    color: white;
    text-align: left;
    line-height: 20px;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
}


.content{
	width:100%;
	float:left;
	margin-top:30px;
        margin-bottom: 50px;
	background:#fff;
	line-height:50px;
	text-align:center;
}
footer{
	width:100%;
	height:30px;
	background:#fa6400;
	float:left;
	line-height:30px;
	color:white;
	text-align:center;
        font-size: 80%;
}

.nav2 {
  margin: 15px 0 0 0;
  }

#work {
width: 80%;
margin: 0 auto;
margin-top: -50px;
padding-top: 50px;
}

#systems {
width: 80%;
margin: 0 auto;
margin-top: -50px;
padding-top: 50px;
}

#office {
width: 80%;
margin: 0 auto;
margin-top: -50px;
padding-top: 50px;
}

#news {
width: 100%;
margin: 0;
margin-top: -50px;
padding-top: 50px;
}
/* ========nav======== */
.nav {
margin: 0;
}

.nav img {
  position: relative;
  width: 85%;
  height: auto;
  top: 12px;
  left: 14px;
}

.nav a {
color: #000000;
text-decoration: none;
}

.nav ul {
font-family: "メイリオ", Meiryo, "MS Pゴシック", Osaka, sans-serif;
letter-spacing: 2px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
color: #fff;
font-size: 90%;
}

.nav ul li {
display: Flex;
padding: 10px 10px;
}

.nav ul li:first-child {
border-left: none;
}

.nav a:hover {
opacity:0.5;
}

.nav a:active {
font-weight: bold;
}
/* ========mein image======== */
.main img {
width: 100%;
height: auto;
object-position: 100% 100%;
font-weight: normal;
margin: 0;
padding: 0;
position: relative;
/* filter: brightness(60%); */
}

.top-left {
  position: absolute;
  top: 42px;
  left: 5px;
  font-size: 41px;
  font-family: serif;
  text-align: left;
  font-weight: 900;
  color: #002153;
  line-height: 1.4;
}

.top-left span{
  font-weight: 900;
  color: #bb5a00;
}

.top-left2 {
  position: absolute;
  top: 176px;
  left: 10px;
  font-size: 18px;
  font-family: serif;
  text-align: left;
  font-weight: 900;
  color: #00072e;
  line-height: 1.4;
}

#concept {
color: #001f5f;
line-height: 2;
font-size: 90%;
}

#concept p img{
width: 80%;
}
/* ========resize======== */
p.resize {
max-width: 960px;
min-width: 240px;
margin: 0 auto;
}

p.resize img {
width: 100%
}
/* ========title======== */

h2 {
font-size: 100%;
font-weight: normal;
margin: 0;
}

.title {
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 130%;
  color: #fa6400;
  margin: 10px auto;
  width: 100%;
}
.title span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}
.title span::before,
.title span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 400%;
  height: 1px;
  background-color: #fa6400;
}
.title span::before {
right: 100%;
}
.title span::after {
  left: 100%;
}
/* ========systems======== */
table.app {
        width: 95%;
        border: 1px solid #fff;
        border-collapse: separate;
        letter-spacing: 0.1em;
        margin: 10px auto;
}
table.app th {
        width: 18%;
        padding: 5px;
        border-right: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        background-color: #fff;
        font-size: 80%;
        color: #fa6400;
        line-height: 1.5;
}
table.app td {
        width: 82%;
        padding: 5px;
        border-right: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        background-color: #F9F9F9;
        font-size: 70%;
        text-align: left;
        color: #444;
        line-height: 1.5;
}
.photo {
width: 95%;
margin: 20px auto;
}
#systems p {
        font-size: 85%;
        font-weight: bold;
        color: #032968;
        letter-spacing: 0.1em;
        line-height: 0;
}
span.results {
        font-size: 75%;
        color: #666;
        float: left;
        letter-spacing: 0.1em;
        margin-left: 5%;
        margin-top: 20px;
        margin-bottom: 10px;
}

/* ========office======== */
table.plofile {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
        font-size: 75%;
	line-height: 1.5;
        letter-spacing: 0.1em;
	border-top: 1px solid #fff;
        color: #444;
        width: 90%;
        margin: 0 auto;
}
table.plofile th {
	width: 15%;
	padding: 10px;
	font-weight: normal;
	vertical-align: top;
	border-bottom: 1px dotted #ccc;
}
table.plofile td {
	width: 85%;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px dotted #ccc;
}
/* ========news======== */
.new {
position: relative;/*相対位置*/
width: 70%;
margin: 0 auto;
line-height: 2;/*行高*/
text-align: left;
top: 10px;
font-size: 85%;
letter-spacing: 0.1em;
color: #444;
}
/* ========result======== */
.iframewrapper {
position: relative;
width: 90%;
overflow:auto;
-webkit-overflow-scrolling:touch;
padding-top: 25%;
display: inline-block;
margin-bottom: 3%;
}

.iframewrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display:block;
}

.results {
        font-size: 70%;
        color: #666;
        line-height: 1.5;
}

.results hr {
	border-top: 1px dotted #CCCCCC;
	border-bottom: 1px dotted #fff;
}

p.office_photo img{
 width: 500px;
 height: 400px;
}



/*---------------------------------------------------------------------------------------------------------------------------------------
※※スマホ※※
---------------------------------------------------------------------------------------------------------------------------------------*/

@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

@media(max-width: 1338px){
  .nav2{
    display:none
  }
}

@media screen and (max-width: 768px) {

    /*----------- ロゴのフェードイン -------------*/
    .logo_fadein{
      background: #FFF;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 9999;
    }
    .logo_fadein p {
      position: fixed;
      left: 48%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: none;
      z-index: 99999;
      width: 280px;
    }

    .logo_fadein img {
      width: 300px;
      height: auto;
    }

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

    /*==================================================
    共通　横並びのための設定
    ===================================*/

    .gnavi{
      display: flex;
      flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
      margin:0 0 50px 0;
      list-style: none;
    }

    .gnavi li a{
      display: block;
      padding:10px 30px;
      text-decoration: none;
      color: #333;
    }

    .gnavi li{
      margin-bottom:20px;
    }

    /*==================================================
    　5-3-6 左から右に線が伸びて背景になる
    ===================================*/

    /*背景の設定*/

    .gnavi li a{
      /*背景色の基点とするためrelativeを指定*/
    position: relative;
      /*アニメーションの指定*/
    transition: all .7s;
    }

    .gnavi li a::after {
    content: '';
      /*絶対配置で線の位置を決める*/
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
      /*背景の形状*/
    width: 0;
    height: 1px;
    background:#0481A2;
    opacity: 0;/*はじめは透過を0に*/
    }

    /*現在地とhoverの設定*/
    .gnavi li.current a::after,
    .gnavi li a:hover::after {
      /*背景の形状*/
    width: 100%;
    opacity: 1;
      /*アニメーションの指定*/
    animation:bgappear 0.5s forwards;
    }

    /*アニメーションで線を伸ばして背景をつける*/
    @keyframes bgappear{
    0% {
      width: 0%;
      height: 1px;
    }
    50% {
      width: 100%;
      height: 1px;
    }
    100% {
      width: 100%;
      height: 100%;
      background: #0481A2;
    }
    }

    /*現在地とhoverの設定*/
    .gnavi li.current a,
    .gnavi li a:hover{
      color: #fff;
      /*テキストを最前面へ*/
    z-index: 1;
    }

    /*========= ナビゲーションのためのCSS ===============*/

    /*アクティブになったエリア*/
    #g-nav.panelactive{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
      top: 0;
      width:100%;
        height: 100vh;
    }

    /*丸の拡大*/
    .circle-bg{
        position: fixed;
      z-index:3;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #ff7b00d7;
        /*丸のスタート位置と形状*/
      transform: scale(0);/*scaleをはじめは0に*/
      right:-50px;
        top:-50px;
        transition: all 0.6s;/*0.6秒かけてアニメーション*/
    }

    .circle-bg.circleactive{
      transform: scale(-10);/*クラスが付与されたらscaleを拡大*/
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav-list{
        display: none;/*はじめは表示なし*/
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #g-nav.panelactive #g-nav-list{
        display: block; /*クラスが付与されたら出現*/
    }

    /*ナビゲーション*/
    #g-nav ul {
      opacity: 0;
      position: absolute;
      z-index: 999;
      top: 35%;
      left: 77%;
      /* right: 60%; */
      /* transform: translate(-84%, -50%); */
      width: 100%;
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity:1;
    }

    /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
    #g-nav.panelactive ul li{
    animation-name:gnaviAnime;
    animation-duration:1s;
    animation-delay:.2s;/*0.2 秒遅らせて出現*/
    animation-fill-mode:forwards;
    opacity:0;
    }
    @keyframes gnaviAnime{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }


    /*リストのレイアウト設定*/
    #g-nav li{
      text-align: center; 
      list-style: none;
    }

    #g-nav li a{
      color: #333;
      text-decoration: none;
      padding:10px;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: bold;
    }


    /*========= ボタンのためのCSS ===============*/

    .container {
        width: 45px;
        height: 80px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
      }
      
      .stick {
        width: 30px;
        height: 3px;
        border-radius: 6px;
        margin-bottom: 7px;
        background-color: #01053d;
        display: inline-block;
      }
      
      .stick:last-child {
        margin-bottom: 0px;
      }
      
      .stick-1.open {
        animation: stick-1-open .6s ease-out forwards;
      }
      
      .stick-2.open {
        animation: stick-2-open .6s linear forwards;
      }
      
      .stick-3.open {
        animation: stick-3-open .6s linear forwards;
      }
      
      @keyframes stick-1-open {
        0%   {width: 80px;}
        40%  {background-color: #ff5e00; width: 8px; transform: translate(40px, 0px);}
        75%, 80%  {width: 8px; transform: translate(40px, -50px); animation-timing-function: cubic-bezier(0,1,1,1);}
        100% {background-color: #ff5e00; width: 8px; transform: translate(35px, 46px);}
      }
      
      @keyframes stick-2-open {
        80%  {background-color: #01053d; transform: translate(0px, 0px) rotate(0deg);}
        100% {background-color: #ff5e00; transform: translate(1px, 0px) rotate(40deg);}
      }
      
      @keyframes stick-3-open {
        80%  {background-color: #01053d; transform: translate(0px, 0px) rotate(0deg);}
        100% {background-color: #ff5e00; transform: translate(0px, -10px) rotate(-40deg);}
      }
      
      .stick-1.close {
        width: 8px; 
        transform: translate(27px, 26px);
        animation: stick-1-close .6s ease-out forwards;
      }
      
      .stick-2.close {
        transform: translate(0px, 0px) rotate(40deg);
        animation: stick-2-close .6s ease-out forwards;
      }
      
      .stick-3.close {
        transform: translate(0px, -23px) rotate(-40deg);
        animation: stick-3-close .6s ease-out forwards;
      }
      
      @keyframes stick-1-close {
        0%, 70% {width: 0px;}
        100%    {width: 30px; transform: translate(0, 0);}
      }
      
      @keyframes stick-2-close {
        0%   {background-color: #ff5e00; width: 80px;}
        20%  {background-color: #ff5e00; width: 8px; transform: translate(0, 0px) rotate(40deg);}
        40%  {background-color: #01053d; width: 0px;}
        65%  {transform: translate(0, -70px); animation-timing-function: cubic-bezier(0,1,1,1);}
        80%  {width: 0px;}
        100% {width: 30px; transform: translate(0, 0px);}
      }
      
      @keyframes stick-3-close {
        0%   {background-color: #ff5e00; width: 80px;}
        20%  {background-color: #ff5e00; width: 8px; transform: translate(0, -23px) rotate(-40deg);}
        40%  {background-color: #01053d;}
        65%  {transform: translate(0, -93px); animation-timing-function: cubic-bezier(0,1,1,1);}
        90%  {width: 8px;}
        100% {width: 30px; transform: translate(0, 0px);}
      }



    /*========= レイアウトのためのCSS ===============*/

    header{
        width: 100%;
        height: 50px;
        float: left;
        position: fixed !important;
        position: absolute;
        background: #ffffff;
        color: white;
        text-align: left;
        line-height: 20px;
        z-index: 9999;
        display: flex;
        flex-wrap: wrap;
    }


    .content{
      width:100%;
      float:left;
      margin-top:30px;
            margin-bottom: 50px;
      background:#fff;
      line-height:50px;
      text-align:center;
    }
    footer{
      width:100%;
      height:30px;
      background:#fa6400;
      float:left;
      line-height:30px;
      color:white;
      text-align:center;
            font-size: 80%;
    }

    .nav2 {
      margin: 15px 0 0 0;
      }

    #work {
    width: 80%;
    margin: 0 auto;
    margin-top: -50px;
    padding-top: 50px;
    }

    #systems {
    width: 80%;
    margin: 0 auto;
    margin-top: -50px;
    padding-top: 50px;
    }

    #office {
    width: 80%;
    margin: 0 auto;
    margin-top: -50px;
    padding-top: 50px;
    }

    #news {
    width: 100%;
    margin: 0;
    margin-top: -50px;
    padding-top: 50px;
    }
    /* ========nav======== */
    .nav {
    margin: 0;
    }

    .nav img {
      position: relative;
      width: 50%;
      height: auto;
      top: 12px;
      left: 14px;
    }

    .nav a {
    color: #000000;
    text-decoration: none;
    }

    .nav ul {
    font-family: "メイリオ", Meiryo, "MS Pゴシック", Osaka, sans-serif;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    color: #fff;
    font-size: 90%;
    }

    .nav ul li {
    display: Flex;
    padding: 10px 10px;
    }

    .nav ul li:first-child {
    border-left: none;
    }

    .nav a:hover {
    opacity:0.5;
    }

    .nav a:active {
    font-weight: bold;
    }
    /* ========mein image======== */
    .main img {
    width: 100%;
    height: auto;
    object-position: 100% 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    position: relative;
    /* filter: brightness(60%); */
    }

    .top-left {
      position: absolute;
      top: 65px;
      left: 5px;
      font-size: 24px;
      font-family: serif;
      text-align: left;
      font-weight: 900;
      color: #002153;
      line-height: 1.4;
    }

    .top-left span{
      font-weight: 900;
      color: #bb5a00;
    }

    .top-left2 {
      position: absolute;
      top: 150px;
      left: 10px;
      font-size: 11px;
      font-family: serif;
      text-align: left;
      font-weight: 900;
      color: #00072e;
      line-height: 1.4;
    }

    #concept {
    color: #001f5f;
    line-height: 2;
    font-size: 90%;
    }

    #concept p img{
    width: 80%;
    }
    /* ========resize======== */
    p.resize {
    max-width: 960px;
    min-width: 240px;
    margin: 0 auto;
    }

    p.resize img {
    width: 100%
    }
    /* ========title======== */

    h2 {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    }

    .title {
      overflow: hidden;
      position: relative;
      text-align: center;
      font-size: 130%;
      color: #fa6400;
      margin: 10px auto;
      width: 100%;
    }
    .title span {
      position: relative;
      display: inline-block;
      margin: 0 2.5em;
      padding: 0 1em;
      text-align: left;
    }
    .title span::before,
    .title span::after {
      position: absolute;
      top: 50%;
      content: '';
      width: 400%;
      height: 1px;
      background-color: #fa6400;
    }
    .title span::before {
    right: 100%;
    }
    .title span::after {
      left: 100%;
    }
    /* ========systems======== */
    table.app {
            width: 95%;
            border: 1px solid #fff;
            border-collapse: separate;
            letter-spacing: 0.1em;
            margin: 10px auto;
    }
    table.app th {
            width: 18%;
            padding: 5px;
            border-right: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            background-color: #fff;
            font-size: 80%;
            color: #fa6400;
            line-height: 1.5;
    }
    table.app td {
            width: 82%;
            padding: 5px;
            border-right: 1px solid #CCCCCC;
            border-bottom: 1px solid #CCCCCC;
            background-color: #F9F9F9;
            font-size: 70%;
            text-align: left;
            color: #444;
            line-height: 1.5;
    }
    .photo {
    width: 95%;
    margin: 20px auto;
    }
    #systems p {
            font-size: 85%;
            font-weight: bold;
            color: #032968;
            letter-spacing: 0.1em;
            line-height: 0;
    }
    span.results {
            font-size: 75%;
            color: #666;
            float: left;
            letter-spacing: 0.1em;
            margin-left: 5%;
            margin-top: 20px;
            margin-bottom: 10px;
    }

    /* ========office======== */
    table.plofile {
      border-collapse: separate;
      border-spacing: 1px;
      text-align: left;
            font-size: 75%;
      line-height: 1.5;
            letter-spacing: 0.1em;
      border-top: 1px solid #fff;
            color: #444;
            width: 90%;
            margin: 0 auto;
    }
    table.plofile th {
      width: 15%;
      padding: 10px;
      font-weight: normal;
      vertical-align: top;
      border-bottom: 1px dotted #ccc;
    }
    table.plofile td {
      width: 85%;
      padding: 10px;
      vertical-align: top;
      border-bottom: 1px dotted #ccc;
    }
    /* ========news======== */
    .new {
    position: relative;/*相対位置*/
    width: 70%;
    margin: 0 auto;
    line-height: 2;/*行高*/
    text-align: left;
    top: 10px;
    font-size: 85%;
    letter-spacing: 0.1em;
    color: #444;
    }
    /* ========result======== */
    .iframewrapper {
    position: relative;
    width: 90%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding-top: 25%;
    display: inline-block;
    margin-bottom: 3%;
    }

    .iframewrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display:block;
    }

    .results {
            font-size: 70%;
            color: #666;
            line-height: 1.5;
    }

    .results hr {
      border-top: 1px dotted #CCCCCC;
      border-bottom: 1px dotted #fff;
    }

    p.office_photo img{
      width: 400px;
      height: 300px;
     }
  
}