@charset "utf-8";

/* 全体のスタイル調整 */
* {
  box-sizing: border-box;
}
body {
  font-size: 20px;
  line-height: 1.5;
  font-family: 'Noto Sans JP', 'Open Sans', sans-serif;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}

h1,h2,h3 {
  margin-top: 0;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
}

h3 {
  color: #85a7cc;
  margin-bottom: 20px;
}
p {
  margin-top: 0;
  margin-bottom: 1.5em;
  text-align: justify;
}
address {
  font-style: normal;
}
a {
  color: #666;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #000;
  text-decoration: none;
}
ul {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}
img {
  width: 100%;
  height: auto;
}
section {
  padding: 70px 0;
}
/* 共通スタイル調整 */
/*スムーススクロール*/
html{
  scroll-behavior: smooth;
}
/*h2*/
.h2_title {
font-size: 1.8em;
margin-bottom: 10px;
}
.h2_title {
  position: relative;
  text-transform: uppercase;
  z-index: 100;
}
.h2_title::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: #a5d1ff;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  transform: rotate(45deg);
  z-index: -100;
}
/*テキスト*/
.txt_center {
  text-align: center;
}
/*ボタン*/
.btn {
  display: block;
  padding: 20px 35px;
  border-radius:8px;
  margin: 0 auto;
  border: none;
}
.btn:hover,.btn:focus {
  opacity: 0.6;
  cursor: pointer;
}
/*詳細はこちらボタン*/
.btn_detail {
  font-size: 16px;
  color: #fff;
  background: #99764e;
}
/*メールでのお問い合わせはこちらボタン*/
.btn_mail{
  font-size: 16px;
  color: #fff;
  background: #508bce;
  margin-bottom: 30px;
}
/*メディア掲載ページボタン*/
.btn_media {
  margin-top: 40px;
  font-size: 16px;
  color: #fff;
  background: #eea93d;
}
/* ページ内リンク位置調整 */
a.anchor{
   display: block;
   padding-top: 70px;
   margin-top: -70px;
}
/*レイアウト*/
.inner {
  padding: 0 15px;
  margin: 0 auto;
}
.sp_setting {
  display: block;
}
.pc_setting {
  display: none;
}
@media screen and (min-width:768px) {
  .inner {
    max-width: 1200px;
  }
  .sp_setting {
    display: none;
  }
  .pc_setting {
    display: block;
  }
}
/* 共通スタイル調整ここまで*/

/* ヘッダー*/
.header {
  position: fixed;
  top: 0px;
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 200;
}
.header_logo_menu {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
/*ロゴ*/
.logo {
  width: 280px;
  margin: 0;
  text-align: left;

}
@media screen and (min-width:768px) {
  .logo {
    width: 300px;
  }
}
/*ハンバーガーメニュー*/
.gnav_toggle {
  position: relative;
  margin-top: 12px;
}
/*チェックボックス非表示*/
.gnav_hidden {
  display: none;
}
/*アイコンのスペース*/
#gnav_open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}
/*ハンバーガーの形*/
#gnav_open span,#gnav_open span::before,#gnav_open span::after {
  content: '';
  position: absolute;
  height: 3px;
  /*線の太さ*/
  width: 25px;
  /*線の長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  cursor: pointer;
}
#gnav_open span::before {
  bottom: -8px;
}
#gnav_open span::after {
  bottom: -16px;
}
/*閉じる用の薄黒箇所*/
#gnav_close {
  display: none;
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
/*チェックがついたら表示させる*/
#gnav_input:checked ~ #gnav_close {
  display: block;
  opacity: 0.5;
}
#gnav_input:checked ~ #gnav_content {
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

/*メインメニュー*/
#gnav_content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  max-width: 300px;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.3s ease-in-out;
  transform: translateX(-105%);
  z-index: 100;
}
.gnav_menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  text-transform: uppercase;
}
.gnav_item {
  border-bottom: 2px dotted #eee;
  margin: 10px;
  padding-bottom: 20px;
}
.gnav_item a {
  color: #fff;
  font-size: 12px;
  display: block;
  width: 200px;
  text-align: center;
}
.gnav_item a::first-line {
  font-size: 17px;
  font-weight: bold;
}
@media screen and (min-width:768px) {
  .gnav_menu {
    flex-direction: row;
    padding-top: 38px;
    margin: 0;
  }

  .gnav_item {
    border-bottom: none;
    margin: 0;
    padding-bottom: 0;
  }

  .gnav_item a {
    color: #333;
    width: 105px;
  }

  .gnav_item a:hover {
    color: #85a7cc;
  }
}

/*サブメニュー*/
#sub_menw {
  background:#274166;
}
.s_menu {
    text-align: center;
}
.s_menw_item {
  display: inline-block;
}
.s_menw_item a {
  padding:20px ;
  font-size: 15px;
      display: flex;
        color: #ffffff;
}
.s_menw_item a:hover {
  color: #85a7cc;
}
@media screen and (max-width:768px) {
  #sub_menw {
    display: none;
  }
  .h2_title {
  }
  .s_menw {
  }
  .s_menw_item {
  }
  .s_menw_item a {
  }
  .s_menw_item a:hover {
  }
}

/*-------------------------------------------
　メインビジュアル
-------------------------------------------*/
.mv_area {
  width: 100%;
  height: 600px;
  background-image: url(../img/img-top-mv.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.mv_title {
  color: #fff;
  text-shadow: 0px 0px 4px #000;
  margin-top: 70px;
      font-size:34px;
}


@media screen and (min-width:1300px) {

  .sp {
  display: none;
  }

  .mv_title {
    font-size:50px;
  }

}


@media screen and (min-width:680px) {
  .mv_area {
    width: 100%;
  height: 600px;

  }

  .mv_title {
    margin-top: 40px;
    font-size:62px;
  }
}





/*-------------------------------------------
　リソスフェアの紹介
-------------------------------------------*/
.info_area {
  background-color: #264066;
      padding: 30px;
      text-align: center;
}
.info_txt {
  color: #fff;
      border: 2px solid #ffffff;
      margin-top: 5px;
      padding: 10px;
}

.info_txt h2{
      font-size:1.3em;
  letter-spacing: 0em;
  }
  .info_area img{
    display: none;
    margin: auto;
    width: 400px;
  }
@media screen and (min-width:1024px) {
  .info-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: start;
    }

  .info_txt {
    flex: 1;
    margin-left: 30px;
    padding: 20px;
    border: 2px solid #ffffff;
  }

  .info_area img {
    flex: 1;
        display: block;
  }
}

/*-------------------------------------------
　サービスの案内
-------------------------------------------*/
.service_area {
  background-color: #fff;
      text-align: center;
}
/*--説明画像--*/
.service_area img {
  max-width: 800px;
  margin: 0 auto;
}
.service_area .inner{
  margin: 0 auto;
}
.service_item img {
  width: 120px;
  margin: 0 auto;
}
@media screen and (min-width:768px) {

  .service_item img {
    width: 120px;
    margin: 0 auto;
  }

  .service_item {
    flex: 1;
  }
}

/*-------------------------------------------
新着情報
-------------------------------------------*/
.news_area {
  margin-top: 50px;
  padding-bottom: 50px;
  background-color: #f9f9e3;
}
.news_area li{
  margin-left: 30px;
  background-color: #f9f9e3;
   background-image:
   linear-gradient(90deg, rgba(255, 246, 230, 0) 0%, rgba(255, 246, 230, 0) 50%, #f9f9e3 0%, #f9f9e3 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #a2a291 100%);
   background-size: 8px 100%,100% 2em;
   line-height: 2em;
   padding: 0em 1em 0.2em 1em;
}
.news_area img {
  display: block;
  max-width: 280px;
  max-height: 280px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px auto 30px;
}
@media screen and (min-width:1074px) {
  .news_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 25%;
  }
}

/*-------------------------------------------
バナー
-------------------------------------------*/
#top_banner {
  text-align: center;
}
#top_banner img{
  width: auto;
  max-width:100%;
}

/*-------------------------------------------
　ページトップへ
-------------------------------------------*/
#page_top{
  width: 100px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #508bce;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '▲';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*-------------------------------------------
　フッター
-------------------------------------------*/
.footer_area {
  color: #fff;
  text-align: center;
  padding-top: 40px;
  background-color: #223345;
}
.footer_logo {
  margin: 0 auto 10px;
  width: 200px;
}
.footer_area_copy {
  color: #ccc;
  font-size: 12px;
  display: inline-block;
  width: 100%;
  padding: 10px;
  background-color: #333;
}

/*-------------------------------------------
サブページ一括
-------------------------------------------*/
.h2_subtitle {
  margin-top: 50px;
  background: linear-gradient(transparent 50%, #bdeaff 50%);
 text-align: left;
}
.h3_subtitle  {
  font-size: 1.2em;
  text-align: left;
  position: relative;
  padding: 0.1em 0.3em;
  padding-left: 1.5em;
  vertical-align: middle;
	color: #333333;
}
.h3_subtitle::before {
	position: absolute;
	top: .25em;
	left: .10em;
	margin-right: 8px;
	content: '●';
	color: #bdeaff;
}
.h4_subtitle  {
  border-bottom:10px solid;
  border-color:#bdeaff;
 text-align: left;
   font-size: 1.2em;
	color: #53A0E4;
}

/*-------------------------------------------
基本姿勢
-------------------------------------------*/
.service_content{
  margin-left: 100px;
  border:solid #ecf5ff;
  border-width:0px 0px 0px 10px;
}
.s_content_s{
  position: relative;
  left: -30px;
  display: block;
  width: 140px;
  padding: 8px;
  background-color:#549de7;
  text-align: center;
  vertical-align: middle;
  color: white;
  font-weight: bold;
  font-size: 25px;
}
.flex{
    display: flex;
    padding: 10px;
}
.flex p,.flex img{
    margin: 10px;
    padding: 10px;

}
.flex img{
  max-width: 300px;
}
.task1:before,.task2:before,.task3:before,.task4:before  {
  position: relative;
  left: -47px;
  top: 47px;
}
.task1:before {
    content: url("../img/service_n01.png");
}
.task2:before {
    content: url("../img/service_n02.png");
}
.task3:before {
    content: url("../img/service_n03.png");
}
.task4:before {
    content: url("../img/service_n04.png");
}
.flex{
  display: block;
  padding: 10px;
}
@media screen and (max-width:768px) {
.s_content_s{
  margin-bottom: 60px;
  }
  .service_content{
    margin-left:0px;
    border:solid #ecf5ff;
    border-width:0px 0px 0px 10px;
  }

  .flex img {
    width: 60%;
    margin-bottom: 40px;
  }
  .task1:before,.task2:before,.task3:before,.task4:before  {
    text-align: center;
  }
  .service_content h4  {
  border-bottom: solid 3px skyblue;
  text-align: center;
}
.task1:before,.task2:before,.task3:before,.task4:before  {
  z-index: 100;
  display: block;
  margin: 0 auto;
    color: #99764e;
    background-color: #f5f4c7;
    width: 100px;
    left:-40%;
    top: -20px;
}
.task1:before {
  content: "stage 1";

}
.task2:before {
  content: "stage 2";　
}
.task3:before {
  content: "stage 3";　
}
.task4:before {
  content: "stage 4";　
}

}

/*-------------------------------------------
　実績紹介
-------------------------------------------*/
.work_area {
  background-color: #edf0f6;
  text-align: center;}
.work_area img{
    width: 100%;
    border: 0px solid #959595;
}
.work_contenta {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;

  column-count: 3;
}
.work_item {
  background-color: #fff;
  margin: 20px 15%;

  box-shadow: 5px 8px 3px #cfd1d6;/*影*/
}
.work_area .work_item{
  padding: 20px;
  }

.work_item_empty {
  visibility: hidden;
}
.work_title{
  letter-spacing: 0.1em;
  font-size: 1.1em
}
.work_bg{
  background-color: white
}
.work_contenta .work_list{
    background-color: #fff;
    margin-bottom: 30px;
    box-shadow:0px 0px 0px 0px #cfd1d6;

        flex: 0 0 340px;

  }

  .work_text{
    font-size: 18px;
  }
  @media screen and (min-width:1024px) {
    .work_contenta {
      flex-direction: row;
      padding: 0 30px;
    }

    .work_item {
      flex: 1;
      margin:10px;
    }

    .work_title{
          letter-spacing: -0.05em;
  font-size: 1em
    }
    .work_text{
  font-size: 0.8em
    }
  }


/*-------------------------------------------
メディア掲載
-------------------------------------------*/

.media_contenta {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
  column-count: 3;
}
.media_contenta .media_list{
    background-color: #fff;
    margin-bottom: 30px;
    box-shadow:0px 0px 0px 0px #cfd1d6;

        flex: 0 0 310px;

  }


.media_area {
    background-color: #fff;
    text-align: center;
}
.media_area img{
    width: 100%;
    border: 0px solid #959595;
}

.media_area .media_item{
margin: 20px 15px;
  padding: 20px;
    width: 100%;
box-shadow: 3px 5px 8px #cfd1d6;
}
  @media screen and (min-width:1024px) {
    .media_contenta {
      flex-direction: row;
      padding: 0 30px;
    }

    .media_item {
      flex: 1;
      margin:10px;
    }

    .work_title{
          letter-spacing: -0.05em;
  font-size: 1em
    }
    .work_text{
  font-size: 0.8em
    }
  }



.media_article { 
    margin: 60px auto;
    width: 80%; }



.media_article h3
{font-size: 1.5em;
   margin:60px 0px 30px; 
    color: #333;
    font-weight: 900;
   text-align: left;
}

.media_article p{
    font-size: 16px;
    font-weight: 400;}

.media_article img{
     margin : 0 auto;
}
/*-------------------------------------------
会社概要
-------------------------------------------*/
.company_area{
  font-size: 0.9em;
}
.company_area li {
  padding: 10px;
}
.c_table{
  margin: 10px auto;
  border-collapse: collapse;
  border-spacing: 0;
      width:95%;
}
.c_table tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;

}
.t-head {
    border-collapse: collapse;
    border: solid 1px #ddd;
    padding: 10px;
    background-color: #efefef;
    width: 140px;}
.t-item {
    border-collapse: collapse;
    border: solid 1px #ddd;
    padding: 10px;
}
@media only screen and (max-width: 480px){
  .c_table{
        width:100%;
  }
  .c_table th, .c_table td {
    display: block;}

 .t-head,.t-item {
   border: solid 0px ;
   width: auto;
 }
}

/*-------------------------------------------
NEWS
-------------------------------------------*/
.news_page{
  margin: 30px auto;
  margin-top: 100px;
  padding: 30px;
  width: 70%;
  height:auto;
  border: 1px solid #1c4c91;
}
.news_page h2{
  margin-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(transparent 100%, #bdeaff 50%);
   border-bottom: 3px solid #bdeaff;
 text-align: left;
}
@media screen and (max-width:768px) {

  .news_page{

    width: 90%;
  }
}