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

  各ページ設定

  1. PCサイズ（769px以上）
    1.1 index.html
      1.1.1 intro-section
      1.1.2 service-section
      1.1.3 company-section
      1.1.4 news-section
    
    1.2 service.html

    1.3 company.html

    1.4 news.html
  
  2. SPサイズ（768px以下）
    2.1 index.html
      2.1.1 intro-section
      2.1.2 service-section
      2.1.3 company-section
      2.1.4 news-section
    
    2.2 service.html

    2.3 company.html

    2.4 news.html

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

/* ---------------------------- */
/* 1. PCサイズ（769px以上）
/* ---------------------------- */

/* 1.1 index.html
/* ---------------------------- */
/* 1.1.1 intro-section */
#intro {
  position: relative;
  height: 64vh;
  background-image: url(../img/img-fv.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.intro-section-inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  background-color: #fff;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 120px;
  border-radius: 40px;
  background-image: url(../img/img_logosymbol.png);
  background-position:85% 80%;
  background-repeat: no-repeat;
  background-size: 25%;
}

#intro p {
  padding-right: 200px;
  line-height: 2em
}

#intro p + p {
  margin: 25px 0 0 0;
}

/* 1.1.2 service-section */
.section-inner-service {
  max-width: 1200px;
  height: 520px;
  margin: 0 auto;
  padding: 80px;
  box-sizing: border-box;
  background-color: #fff;
  background-image: url(../img/bg-service.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

/* 1.1.3 company-section */
.bg-company {
  background-image: url(../img/bg-company.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.company-list {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

.company-list li {
  position: relative;
  width: calc((100% - 60px) / 2);
}

.company-item-title {
  position: absolute;
  top: 80px;
  left:40px;
  font-size: 24px;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: bold;
  letter-spacing: .4em;
}

.company-item-text {
  height: 50px;
  margin: 20px 0;
}

.link-btn-s {
  margin-left: 55%;
}

/* 1.1.4 news-section */
.news-list {
  margin-top: 40px;
}

.news-item {
  display: flex;
  width: 1000px;
  padding: 40px;
	border-bottom: 1px solid #96af87;	/*下線の幅、線種、色*/
  color: #4f4139;
  text-decoration: none;
}

.news-date {
	width: 100px;
  margin-right: 40px;
}

.fa-arrow-right {
  color: #96af87;
}

/* 1.2 service.html
/* ---------------------------- */
#service .fv {
  background-image: url(../img/img-service.jpg);
  height: 80vh;
}

.service-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 100px;
}

.service-lead {
  margin-bottom: 100px;
}


.text-m {
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/* 1.3 company.html
/* ---------------------------- */
#company .fv {
  height: 80vh;
  background-image: url(../img/img-company.jpg);
}

.title-philosophy {
  margin-top: 60px;
  padding-bottom: 20px;
  font-size: 40px;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: bold;
  text-align: center;
}

.title-philosophy:after {
  display: block;
  height: 8px;
  margin-top: 20px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
  content: "";
}

.text-philosophy {
  margin: 60px 0;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}

.bg-overview {
  background-color: #f5f5f0;
}

.overview-body {
  margin-top: 60px;
  background-color: #fff;
  border-radius: 40px;
}

.table {
  display: flex;
  width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.table-header {
  width: 160px;
  padding-left: 20px;
  padding: 20px;
  border-bottom: 2px solid #d3381c;
  font-weight: bold;
}
.table-data{
  width: 600px;
  padding: 40px;
  border-bottom: 2px solid #ddd;
}
.maps-outer{
  width: 1000px;
  text-align: center;
}
.maps-outer iframe{
  width: 80%;
  margin: 40px 0 60px;
}

/* 1.4 news.html
/* ---------------------------- */
#news .fv {
  height: 80vh;
  background-image: url(../img/img-news.jpg);
}

.pager .pagination {
  text-align: center;
}

.pager .pagination li {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 40px 2px;
  padding: 0;
  border-radius: 10px;
  text-align: center;
}

.pager .pagination li a {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #96af87;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}

.pager .pagination li a span {
  display: table-cell;
  vertical-align: middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active {
  color: #fff;
  background: #96af87;
}

/* ---------------------------- */
/* 2. SPサイズ（768px以下）
/* ---------------------------- */
@media screen and (max-width:768px) {

  /* 2.1 index.html
  /* ---------------------------- */
  /* 2.1.1 intro-section */
  #intro {
    height: 100vh;
  }

  .intro-section-inner {
    flex-direction: column;
    max-width: 355px;
    padding: 20px;
    box-sizing: border-box;
    background-position: 90%;
    background-size: 40%;
  }

  #intro p {
    padding-right: 0;
  }

  /* 2.1.2 service-section */
  .section-inner-service {
    padding: 10px;
    background-image: unset;
  }

  .section-title, .section-inner-service p {
    color: #4f4139;
  }

  .img-sp {
    display: block;
    width: 335px;
    margin: 20px auto 0;
  }
  
  .service-btn {
    margin:40px auto 0px;
  }

  .service-inner {
    padding: 10px;
  }

  /* 2.1.3 company-section */
  .company-list {
    flex-direction: column;
    margin-top:0px;
  }

  .company-list li {
    width: 355px;
  }

  .company-item-title {
    position: static;
    margin-top: 20px;
    color: #96af87;
    text-align: center;
  }

  .link-btn-s {
    margin:0 auto;
    width: 320px;
  }

  /* 2.1.4 news-section */
  .news-list a {
    max-width: 355px;
    padding:40px 0px;
  }

  .news-item {
    width: 315px;
    padding: 20px;
  }

  .news-date {
    width: 60px;
    margin-right: 40px;
  }

  .link-btn {
    margin-top: 40px;
  }

  /* 2.2 service.html
  /* ---------------------------- */
  #service .fv {
    background-image: url(../img/bg-service-sp.jpg);
  }

  .service-lead {
      margin-bottom: 60px;
  }

  .service-list {
      margin-bottom: 60px;
  }

  .text-m {
      font-size: 14px;
      margin-bottom: 8px;
  }

  /* 2.3 company.html
  /* ---------------------------- */
  #company .fv {
    background-image: url(../img/bg-mission-sp.jpg);
  }

  .title-philosophy {
    font-size: 18px;
  }

  .text-philosophy {
    margin: 20px 0;
    font-weight: normal;
    line-height: 24px;
  }

  .overview-body {
    border-radius: 20px;
  }

  .table {
    width: 335px;
    padding-top: 20px;
  }

  .table-header {
    width: 120px;
    padding: 10px;
  }

  .table-data {
    padding: 20px 0;
  }

  .maps-outer {
    width: 335px;
  }

  .maps-outer iframe {
    width: 100%;
    margin: 20px 10px 40px;
  }

  /* 2.4 news.html
  /* ---------------------------- */

  #news .fv {
    background-image: url(../img/bg-news-sp.png);
  }

  .pager .pagination li { 
    display: none;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next {
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a {
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after {
    content: "　前の10件へ";
  }

  .pager .pagination li.next span::before {
    content: "次の10件へ　";
  }

}