@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

/* ===================================================================
CSS information

 File Name  : style.css
 Style Info : レイアウト
=================================================================== */

html {
  overflow-y: scroll;
  line-height: 1;
  font-size: 62.5%;
}
body {
  background: #fff;
  color: #111;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
  letter-spacing:0.1rem;
  font-weight:500;
  /*font-feature-settings: "palt";*/
  font-size: 16px;
  font-size: 1.6rem;
  word-break: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
  @media screen and (max-width: 767px) {
    body {
      font-size: 4vw;
      letter-spacing:0.2vw;
    }
  }

/*----------------------------------------------------
  link要素
--------------------------------------------------- */
a {
  transition: all 0.2s ease-in-out 0s;
}
a:link {
  color: #005bac;
}
a:visited {
  color: #005bac;
}
a:hover {
  text-decoration: none;
  color: #005bac;
}
a:active {
  color: #005bac;
}
:focus-ring {
  outline: dotted 1px #F6AB00;
}
:-moz-focusring {
  outline: dotted 1px #F6AB00;
}

/*----------------------------------------------------
  img要素
--------------------------------------------------- */
img {
  line-height: 1;
  font-size: 0;
  vertical-align: top;
  height: auto;
  max-width: 100%;
  transition: all 0.2s ease-in-out 0s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*----------------------------------------------------
  見出し要素
--------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
  line-height: 1.5;
}

/*----------------------------------------------------
 フォントファミリー
--------------------------------------------------- */
.mincho {
  font-family: "游明朝", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Sawarabi Mincho", serif;
}

/*----------------------------------------------------
 共通カラム
--------------------------------------------------- */
#page {
  min-width: 1162px;
  overflow:hidden;
  margin: 0 auto;
  -webkit-animation: ani_fade 0.7s ease 0s 1 forwards;
  animation: ani_fade 0.7s ease 0s 1 forwards;
}
#contents {
  line-height: 1.8;
}
#contents a:hover img{
  opacity: 0.70;
}
.wrapper {
  position: relative;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.inner {
  position: relative;
  width: 1142px;
  margin-left: auto;
  margin-right: auto;
}
  @media screen and (max-width: 767px) {
    html, body, #page {
      min-width:100%!important;
      max-width:100%!important;
      width:100%!important;
    }
    #page {
      padding-top: 55px;
    }
    #contents {
      line-height: 1.6;
    }
    .wrapper, .inner {
      width:100%;
    }
  }

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
#header {
  position: fixed;
  width: 100%;
  min-width: 1142px;
  height: 90px;
  left: 0;
  top: 0;
  z-index: 100;
}
#header .logo {
  display:inline-block;
}
#hd_wrap .inner {
  height: 100%;
}
  @media screen and (max-width: 767px) {
    #header {
      min-width: 100%;
      height: 55px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 3px 3px rgba(000,000,000,0.1);
    }
    #header .logo {
      position: relative;
      top: 0;
      left: -10px;
      width: 242px;
    }
    #header .logo img {
      width: 100%;
      height: auto;
    }
  }

.site_copy {
  position: absolute;
  left: 402px;
  top: 25px;
  font-size: 1.4rem;
  color: #666;
  font-weight: 500;
  transition: all 0.4s ease-in-out 0s;
}
#header.active .site_copy {
  opacity: 0;
}

.hd_menu {
  position: absolute;
  right: 35px;
  top: 35px;
  transition: all 0.4s ease-in-out 0s;
}
.hd_menu li {
  position: relative;
  line-height: 1.2;
}
.hd_menu li::after {
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #666;
  transition: all 0.4s ease-in-out 0s;
}
.hd_menu li:first-child::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #666;
  transition: all 0.4s ease-in-out 0s;
}
.hd_menu li a {
  display: block;
  color: #666;
  text-decoration: none;
  padding: 0 28px;
}
#header.active .hd_menu {
  position: absolute;
  right: 35px;
  top: 0;
  padding: 14px 0;
  border-radius: 0 0 10px 10px;
  background: #144886;
}
#header.active .hd_menu li:first-child::before {
  opacity: 0;
}
#header.active .hd_menu li:last-child::after {
  opacity: 0;
}
#header.active .hd_menu li a{
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0 28px;
}
#header.active .hd_menu li::after {
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #fff;
  transition: all 0.4s ease-in-out 0s;
}
#header.active .hd_menu li:first-child::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #fff;
  transition: all 0.4s ease-in-out 0s;
}
.hd_btn a {
  position: relative;
  display: block;
  width: 250px;
  line-height: 38px;
  padding-left: 30px;
	margin-top: 25px;
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  background: rgba(54,123,191);
}
.hd_btn a::before {
  position: absolute;
  left: -15px;
  top: 50%;
  content: "";
  width: 30px;
  height: 1px;
}
.hd_btn a::after {
  position: absolute;
  left: 20px;
  top: 7px;
  content: "";
  width: 34px;
  height: 25px;
  background: url("../img/ico_kamotu.png") 0 0 no-repeat;
}
.hd_btn a:hover {
  border: solid 1px #ccc;
}
.hd_btn a:hover::before {
  width: 0;
  left: 0;
}
.hd_wrap .hd_btn {
  position: absolute;
  right: 0;
  top: 27px;
}


/*----------------------------------------------------
	フッター
----------------------------------------------------*/
#footer {
  text-align: center;
  background: #eee;
  padding: 68px 0 25px;
}
.ft_logo {
  margin-bottom: 30px;
}
#footer dl {
  line-height: 1.6;
  margin-bottom: 28px;
}
#footer dt {
  font-size: 1.7rem;
  color: #09318d;
  margin-bottom: 5px;
}
#footer dd {
  font-size: 1.4rem;
}
#footer dd a {
  color: #333;
}
#footer dd a:hover {
  color: #005bac;
}
.copyright {
  font-size: 1.4rem;
  color: #bcbaba;
}
  @media screen and (max-width: 767px) {
    #footer {
      padding: 13.33vw 0 5.33vw;
    }
    .ft_logo {
      margin-bottom: 2.33vw;
    }
    .ft_logo img {
      width: 33.33vw;
      height: auto;
    }
    #footer dl {
      margin-bottom: 8.7vw;
    }
    #footer dt {
      font-size: 4.53vw;
      margin-bottom: 2.66vw;
    }
    #footer dd {
      font-size: 3.73vw;
      letter-spacing: 0;
      line-height: 1.7;
    }
    .copyright {
      font-size: 2.66vw;
    }
  }

/*----------------------------------------------------
  共通タイトル
--------------------------------------------------- */
.sub_ttl01 span {
  position: relative;
  display: inline-block;
  color: #005bac;
  font-size: 3rem;
  font-weight: 500;
  padding-right: 198px;
}
.sub_ttl01 span::after {
  position: absolute;
  right: 22px;
  top: 50%;
  content: "";
  width: 150px;
  height: 2px;
  background: #D3D3D3;
}
.sub_ttl01 strong {
  position: relative;
  top: -3px;
  display: inline-block;
  font-weight: 500;
}
  @media screen and (max-width: 767px) {
    .sub_ttl01 span {
      font-size: 6.66vw;
      padding-right: 23.33vw;
    }
    .sub_ttl01 span::after {
      right: 1.33vw;
      width: 19.46vw;
      height: 1px;
    }
    .sub_ttl01 strong {
      top: -0.66vw;
      font-size: 3.73vw;
      letter-spacing: 0;
    }
  }

/*----------------------------------------------------
  共通ボタン
--------------------------------------------------- */
.pagetop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 10000;
  display:none;
}
.pagetop a:hover {
  opacity: 0.7;
}
  @media screen and (max-width: 767px) {
    .pagetop {
      display: none!important;
    }
  }

/*----------------------------------------------------
  共通メニュー
--------------------------------------------------- */

  /*スマホナビ*/
  @media screen and (max-width: 767px) {
    /*transition*/
    .trs {
      -webkit-transition: all .1s ease;
      -moz-transition: all .1s ease;
      -ms-transition: all .1s ease;
      -o-transition: all .1s ease;
      transition: all .1s ease;
    }
    /*trp*/
    .trp {
      -webkit-transition: opacity .1s ease;
      -moz-transition: opacity .1s ease;
      -ms-transition: opacity .1s ease;
      -o-transition: opacity .1s ease;
      transition: opacity .1s ease;
      opacity: 1;
      filter: alpha(opacity=100);
    }
    .trp:hover {
      opacity: .6;
      filter: alpha(opacity=60);
    }
    /* trs-dr */
    .trs-dr02 {
      -webkit-transition-duration: .2s;
      -moz-transition-duration: .2s;
      -ms-transition-duration: .2s;
      -o-transition-duration: .2s;
      transition-duration: .2s;
    }
    .trs-dr03 {
      -webkit-transition-duration: .3s;
      -moz-transition-duration: .3s;
      -ms-transition-duration: .3s;
      -o-transition-duration: .3s;
      transition-duration: .3s;
    }
    .trs-dr05 {
      -webkit-transition-duration: .5s;
      -moz-transition-duration: .5s;
      -ms-transition-duration: .5s;
      -o-transition-duration: .5s;
      transition-duration: .5s;
    }
    .trs-dr06 {
      -webkit-transition-duration: .6s;
      -moz-transition-duration: .6s;
      -ms-transition-duration: .6s;
      -o-transition-duration: .6s;
      transition-duration: .6s;
    }
    .trs-dr08 {
      -webkit-transition-duration: .8s;
      -moz-transition-duration: .8s;
      -ms-transition-duration: .8s;
      -o-transition-duration: .8s;
      transition-duration: .8s;
    }
    .trs-dr12 {
      -webkit-transition-duration: 1.2s;
      -moz-transition-duration: 1.2s;
      -ms-transition-duration: 1.2s;
      -o-transition-duration: 1.2s;
      transition-duration: 1.2s;
    }
    /* trs-tf */
    .trs-tfCb {
      -webkit-transition-timing-function: cubic-bezier(0, .96, .4, .99);
      -moz-transition-timing-function: cubic-bezier(0, .96, .4, .99);
      -ms-transition-timing-function: cubic-bezier(0, .96, .4, .99);
      -o-transition-timing-function: cubic-bezier(0, .96, .4, .99);
      transition-timing-function: cubic-bezier(0, .96, .4, .99);
    }
    .menuTrigger {
      position: fixed;
      z-index: 150;
      top: 0;
      right: 0;
      display: block;
      width: 55px;
      height: 55px;
      cursor: pointer;
      transition: .3s;
      background: #144886;
    }
    .menuTrigger.open {
      position: fixed;
      top: 0;
    }
    .menuIcon_line {
      position: absolute;
      left: 50%;
      margin-left: -18px;
      width: 36px;
      height: 3px;
      background: #fff;
    }
    .menuIcon_line:nth-of-type(1) {
      top: 13px;
    }
    .menuIcon_line:nth-of-type(2) {
      top: 26px;
    }
    .menuIcon_line:nth-of-type(3) {
      top: 39px;
    }
    /* open */
    .menuTrigger.open .menuIcon_line {
      background: #fff;
    }
    .menuTrigger.open .menuIcon_line:nth-of-type(1) {
      top: 26px;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    .menuTrigger.open .menuIcon_line:nth-of-type(2) {
      opacity: 0;
    }
    .menuTrigger.open .menuIcon_line:nth-of-type(3) {
      top: 26px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    #hbNav {
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0 4.5vw;
      background-color: rgba(53,95,151,0.95);
      z-index: 50;
      overflow-y: visible;
      overflow-x: hidden;
      -webkit-overflow-scrolling: auto;
      overflow-scrolling: auto;
    }
    .hb_inner {
      box-sizing: border-box;
      display: table;
      width: 100%;
      height: 100%;
      font-size: 4.8vw;
      padding-top: calc(60px + 5vw);
      text-align: center;
    }
    .hb_inner a {
      color: #fff;
      text-decoration: none;
      text-align: center;
    }
    .hb_menu01 {
      margin-bottom: 7vw;
    }
    .hb_menu01 li {
      border-bottom: solid 1px rgba(255,255,255,0.3);
    }
    .hb_menu01 li a {
      display: block;
      padding: 4.7vw;
    }
    .hb_mail a {
      display: inline-block;
      background: url("../img/ico_mail02.svg") 0 center no-repeat;
      background-size: 5.33vw auto;
      padding-left: 8vw;
    }
	.hb_kamotu a {
      margin-top: 40px;
      display: inline-block;
      background: url("../img/ico_kamotu.png") 0 center no-repeat;     
      padding-left: 12vw;
	  padding-top: 3px;
      height: 25px;
    }	
  }

/*----------------------------------------------------
	メインビジュアル
----------------------------------------------------*/
#mainVisual {
  height: 880px;
  background: url("../img/main_pc.jpg") center top no-repeat;
  background-size: cover;
}
#mainVisual .inner {
  height: 100%;
}
#mainVisual dl {
  position: absolute;
  left: 142px;
  top: 355px;
  color: #293038;
  line-height: 1.6;
  text-shadow: 0 0 5px rgba(255,255,255,0.7);
}
#mainVisual dt {
  font-size: 3.4rem;
}
#mainVisual dt:first-letter {
  color: #09318d;
}
#mainVisual dd {
  font-size: 2.2rem;
  padding-left: 7px;
}
#mainVisual dd span {
  color: #09318d;
}
  @media screen and (max-width: 767px) {
    #mainVisual {
      height: 120vw;
      background: url("../img/main_sp.jpg") center top no-repeat;
      background-size: cover;
    }
    #mainVisual dl {
      left: 5.33vw;
      top: 32.66vw;
      text-shadow: 0 0 3px rgba(255,255,255,1);
      font-weight: 500;
    }
    #mainVisual dt {
      font-size: 6.13vw;
    }
    #mainVisual dd {
      font-size: 4vw;
      padding-left: 1.33vw;
    }
  }

/*----------------------------------------------------
	トップコンテンツ
----------------------------------------------------*/

/*当社について*/
#about {
  position: relative;
  padding-top: 80px;
  min-height: 560px;
}
#about::after {
  position: absolute;
  right: calc(50% - 760px);
  top: 80px;
  content: "";
  width: 750px;
  height: 480px;
  background: url("../img/about_img.jpg") center center no-repeat;
  background-size: cover;
}
.bs_ipad #about::after {
  right: calc(50% - 580px);
  top: 100px;
  width: 600px;
  height: 400px;
}
.about_txt {
  width: 550px;
  padding-top: 40px;
}
.about_txt dl {
  padding: 25px 0;
}
.about_txt dt {
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.about_txt dt:first-letter {
  color: #09318d;
  font-size: 2.4rem;
}
.about_txt dd {
  width: 510px;
}
  @media screen and (max-width: 767px) {
    #about {
      padding: 10.66vw 2vw 70.66vw;
      min-height: auto;
    }
    #about::after {
      right: 0!important;
      top: auto;
      bottom: 0;
      width: 100%!important;
      height: 64vw!important;
    }
    .about_txt {
      width: 100%;
      padding-top: 0;
    }
    .about_txt dl {
      padding: 3.33vw 0 0 0;
    }
    .about_txt dt {
      font-size: 4.53vw;
      line-height: 1.5;
      margin-bottom: 3.33vw;
    }
    .about_txt dt:first-letter {
      font-size: 5vw;
    }
    .about_txt dd {
      width: 100%;
      letter-spacing: 0.1vw;
    }
  }

/*事業内容*/
#service {
  padding-top: 80px;
}
.service_lead {
  text-align: center;
  padding: 15px 0 42px;
}
.service_box {
  width: 360px;
  background: #F7F6F2;
  margin: 0 30px 20px 0;
  padding: 15px;
}
.service_box:nth-child(3n) {
  margin-right: 0;
}
.service_box h3 {
  text-align: center;
  padding-bottom: 13px;
  border-bottom: solid 2px #E0E0E0;
  margin-bottom: 12px;
}
.service_box h3 span {
  min-height: 92px;
}
.service_box h3 b {
  display: block;
  font-size: 1.8rem;
  color: #144886;
}
.service_box p {
  text-align: center;
  padding-bottom: 13px;
  line-height: 1.9;
}
  @media screen and (max-width: 767px) {
    #service {
      padding: 10.66vw 2vw 0;
    }
    .service_lead {
      text-align: center;
      padding: 2.66vw 0 6vw;
    }
    .service_box {
      width: 100%;
      margin: 0 0 9.33vw 0;
      padding: 4vw;
    }
    .service_box:last-child {
      margin-bottom: 0;
    }
    .service_box h3 {
      padding-bottom: 3.33vw;
      border-bottom: solid 1px #E0E0E0;
      margin-bottom: 3.73vw;
    }
    .service_box h3 span {
      min-height: auto;
      padding: 2.33vw 0;
    }
    .service_box h3 b {
      font-size: 4.8vw;
    }
    .service_box p {
      font-size: 4.26vw;
      padding-bottom: 5vw;
      line-height: 1.6;
    }
    .service_box:nth-child(1) span img {
      width: 24.53vw;
      height: auto;
    }
    .service_box:nth-child(2) span img {
      width: 26.26vw;
      height: auto;
    }
    .service_box:nth-child(3) span img {
      width: 27.46vw;
      height: auto;
    }
  }

/*会社概要*/
#company {
  padding: 80px 0 110px;
}
.outline {
  max-width: 1000px;
  margin: 0 auto
}
.outline table {
  margin: 35px 0 75px;
}
#company th {
  width: 300px;
  font-weight: 500;
  border: solid 1px #D3D3D1;
  padding: 15px 30px;
  background: #EBEAE7;
}
#company td {
  border: solid 1px #D3D3D1;
  padding: 15px 30px;
}
  @media screen and (max-width: 767px) {
    #company {
      padding: 10.66vw 2vw;
    }
    .outline {
      max-width: 100%;
    }
    .outline table,
    .outline tbody,
    .outline tr,
    .outline th,
    .outline td {
      display: block;
      width: 100%!important;
      text-align: left;
    }
    .outline table {
      margin: 5.33vw 0 13.33vw;
    }
    #company th {
      border-bottom: none;
      padding: 2vw 2.33vw;
    }
    #company td {
      border-bottom: none;
      padding: 2vw 2.33vw;
    }
    #company tr:last-child td {
      border: solid 1px #D3D3D1;
    }
  }

.contact_mail {
  text-align: center;
}
.contact_mail dt {
  border-top: solid 2px #D3D1D1;
  border-bottom: solid 2px #D3D1D1;
  color: #005bac;
  font-size: 1.7rem;
  font-weight: 600;
  padding: 10px;
}
.contact_mail dd {
  border-bottom: solid 2px #D3D1D1;
  padding: 15px;
}
.contact_mail dd a {
  display: inline-block;
  font-size: 3rem;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  padding-left: 60px;
  background: url("../img/ico_mail01.png") left center no-repeat;
}
.contact_mail dd a:hover {
  color: #144886;
}
  @media screen and (max-width: 767px) {
    .contact_mail dt {
      border-top: solid 1px #D3D1D1;
      border-bottom: solid 1px #D3D1D1;
      font-size: 4.53vw;
      padding: 3.73vw 0;
      line-height: 1.5;
    }
    .contact_mail dd {
      border-bottom: solid 1px #D3D1D1;
      padding: 6vw 0;
    }
    .contact_mail dd a {
      font-size: 6.13vw;
      padding-left: 11.33vw;
      background-size: 8.4vw 8.4vw;
      letter-spacing: 0;
    }
  }

.ft_kamotu {
  width: 900px;
  margin: 30px auto;
}
.ft_kamotu a {
  width: 900px;
  display: block;
  padding: 20px 5px;
  background: rgba(54,123,191);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 1.8rem;
  border-radius: 5px;
}
.ft_lkamotu a:hover {
  opacity: 0.7;
}
.ft_kamotu a {
  position: relative;
  display: inline-block;
  padding-left: 52px;
}
.ft_kamotu a::before {
  position: absolute;	
  top: calc(50% - 13px);
  left: 320px;
  content: "";
  width: 34px;
  height: 25px;
  background: url("../img/ico_kamotu.png") 0 0 no-repeat;
}
  @media screen and (max-width: 767px) {
    .ft_kamotu {
      width: 100%;
      margin: 9.33vw auto;
    }
    .ft_kamotu a {
	  width: 100%;
      padding: 3.73vw 1.33vw;
      font-size: 4.26vw;
      border-radius: 1vw;
      letter-spacing: 0;
    }
    .ft_kamotu span {
      padding-left: 10vw;
    }
    .ft_kamotu a::before {
      top: calc(50% - 3.16vw);
      left: 18vw;
      /*width: 34px;
      height: 25px;
      background-size: 8vw 7.6vw;*/
    }
  }