@charset "utf-8";

/* ----------------------------------------------------------------------
Text
---------------------------------------------------------------------- */
.bold {
  font-weight: bold;
}

.fontL {
  font-size: 160%;
}

.fontM {
  font-size: 120%;
}

.fontS {
  font-size: 85%;
}

.indent {
	text-indent: -1em;
    padding-left: 1em;
}

.justify {
  text-align: justify;
  text-justify: inter-ideograph;
}

.textV {
  -ms-writing-mode: tb-rl;            /* IE用　*/
  -webkit-writing-mode: vertical-rl;  /* chrome用　*/
  -o-writing-mode: vertical-rl;       /* opera用　*/
  writing-mode: vertical-rl;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .textV {
    -ms-writing-mode: initial;            /* IE用　*/
    -webkit-writing-mode: initial;  /* chrome用　*/
    -o-writing-mode: initial;       /* opera用　*/
    writing-mode: initial;
  }
}

/* ----------------------------------------------------------------------
img
---------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

a img:hover {
  opacity: 0.85;
  filter: alpha(opacity=85);
  -ms-filter: "alpha(opacity=85)";
}

/* ----------------------------------------------------------------------
Parts
---------------------------------------------------------------------- */
.t_center {
  text-align: center;
}

.t_right {
  text-align: right;
}

.t_left {
  text-align: left;
}

.f_left {
  float: left;
}

.f_right {
  float: right;
}

/* 表示 */
.pc-none {
  display: none;
}

.mb-none {
  display: initial;
}

@media (max-width: 767px) {
  .pc-none {
    display: initial;
  }
  .mb-none {
    display: none;
  }
}

/* ----------------------------------------------------------------------
Flex
---------------------------------------------------------------------- */
.flexList, .flexbox {
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  align-items: center;
}

.flex-nowrap {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
}

.flex-center {
  -webkit-justify-content: center; /* Safari用 */
  justify-content: center;
  -webkit-align-items: center; /* Safari用 */
  align-items: center;
}

.flex-between {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

.flex-start {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
}

/* margin
*************************************************************/
.m0{margin:0 !important}
.mt0{margin-top:0 !important}
.mr0{margin-right:0 !important}
.mb0{margin-bottom:0 !important}
.ml0{margin-left:0 !important}

.m5{margin:5px !important}
.mt5{margin-top:5px !important}
.mr5{margin-right:5px !important}
.mb5{margin-bottom:5px !important}
.ml5{margin-left:5px !important}

.m10{margin:10px !important}
.mt10{margin-top:10px !important}
.mr10{margin-right:10px !important}
.mb10{margin-bottom:10px !important}
.ml10{margin-left:10px !important}

.m15{margin:15px !important}
.mt15{margin-top:15px !important}
.mr15{margin-right:15px !important}
.mb15{margin-bottom:15px !important}
.ml15{margin-left:15px !important}

.m20{margin:20px !important}
.mt20{margin-top:20px !important}
.mr20{margin-right:20px !important}
.mb20{margin-bottom:20px !important}
.ml20{margin-left:20px !important}

.m25{margin:25px !important}
.mt25{margin-top:25px !important}
.mr25{margin-right:25px !important}
.mb25{margin-bottom:25px !important}
.ml25{margin-left:25px !important}

.m30{margin:30px !important}
.mt30{margin-top:30px !important}
.mr30{margin-right:30px !important}
.mb30{margin-bottom:30px !important}
.ml30{margin-left:30px !important}

.mt50{margin-top:50px !important}
.mb50{margin-bottom:50px !important}

/* padding
*************************************************************/
.p0{padding:0 !important}
.pt0{padding-top:0 !important}
.pr0{padding-right:0 !important}
.pb0{padding-bottom:0 !important}
.pl0{padding-left:0 !important}

.p5{padding:5px !important}
.pt5{padding-top:5px !important}
.pr5{padding-right:5px !important}
.pb5{padding-bottom:5px !important}
.pl5{padding-left:5px !important}

.p10{padding:10px !important}
.pt10{padding-top:10px !important}
.pr10{padding-right:10px !important}
.pb10{padding-bottom:10px !important}
.pl10{padding-left:10px !important}

.p15{padding:15px !important}
.pt15{padding-top:15px !important}
.pr15{padding-right:15px !important}
.pb15{padding-bottom:15px !important}
.pl15{padding-left:15px !important}

/* 
ここまで　全サイト共通　変更不可　※変更の場合は後述で上書き※
---------------------------------------------------------------------- */

/*　固定ページ：共通
---------------------------------------------------------------------- */
#service_flow.sectionInner, #service.sectionInner {
  width: 100%;
  margin: 0;
  padding: 0;
}
#service_flow .section , #service .section{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.flow_flowArea {
  width: calc(980px - 20px);
  background: #fff;
  margin: 0 auto;
  padding: 5px 10px 10px; 
}
.flow_flowArea li:last-child {
  margin-right: -20px;
}

.boxTop {
  display: table;
}

.boxLeft, .boxRight {
  display: table-cell;
  text-align: left;
  vertical-align: top;
}


/*　固定ページ：サービスの流れ
---------------------------------------------------------------------- */
#service_flow_s1.section, #service_flow_s3.section {
  padding: 60px 0;
}

#service_flow h3 {
  width: calc(980px - 20px);
  margin: 0 auto 20px;
}

#service_flow_s2.section {
  width: 980px;
  margin: 60px auto;
}

#service_flow_s2 ul li {
  width: auto;
  margin: 0 0 35px 0;
  padding: 30px 85px 30px;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
}

#service_flow_s2 ul .boxLeft {
  width: 40%;
}
#service_flow_s2 ul .boxRight {
  width: auto;
  padding: 30px 0 0 20px;
}

#service_flow_s2 ul li.step1 {
  background: url(../img/common/img_flowico_01-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}
#service_flow_s2 ul li.step2 {
  background: url(../img/common/img_flowico_02-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}
#service_flow_s2 ul li.step3 {
  background: url(../img/common/img_flowico_03-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}
#service_flow_s2 ul li.step4 {
  background: url(../img/common/img_flowico_04-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}
#service_flow_s2 ul li.step5 {
  background: url(../img/common/img_flowico_05-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}
#service_flow_s2 ul li.step6 {
  background: url(../img/common/img_flowico_06-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}

#service_flow_s2 ul li.step2 .boxUnder {
  width: 600px;
  margin: 20px auto;
}
#service_flow_s2 ul li.step2 .boxUnder .boxUnderH {
  color: #fff;
  padding: 10px 0;
  text-align: center;
  background: #002c6d;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  -moz-box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}
#service_flow_s2 ul li.step2 .boxUnder .boxUnderText {
  padding: 30px 15px;
  background: url(../img/common/icon_arrow06.png) center top 0 no-repeat, #f4f4f4;
  background-size: 45px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  -moz-box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

#service_flow_s2 ul li.step6 {
    width: 450px;
    margin: 0 auto;
    padding: 30px 30px 30px 85px;
}
#service_flow_s2 ul li.step6 .boxLeft {
  width: auto;
}
#service_flow_s2 ul li.step6 .boxRight {
  width: auto;
  padding: 0 0 0 20px;
}

#service_flow_s2 ul li.li-arrow {
  background: none;
  border: none;
  text-align: center;
  margin: 20px 0;
  padding: 0;
}

#service_flow_s3.section {
  padding: 60px 0 100px 0;
}
#service_flow_s3 h3 {
  width: auto;
  margin: 0;
}
#service_flow_s3 div {
  width: 600px;
  margin: 0 auto;
  padding: 15px 50px;
  background: #f2f2f2;
  text-align: center;
}
#service_flow_s3 div p {
  margin: 15px 60px 0;
  text-align: left;
}

#service_flow_s3 .btn {
  margin: 20px auto 0;
  text-align: center;
}

/*　固定ページ：サービス
---------------------------------------------------------------------- */
#service_s4.section, #service_s5.section, #service_s6.section, #service_s7.section {
  margin: 0 0 100px 0;
}

#service .h3Area {
  width: 100%;
  background: url(../img/common/icon_arrow05.png) center bottom no-repeat;
  background-size: 100px;
  margin: 30px 0;
  padding: 0 0 50px 0;
  text-align: center
}

#service .h3Area h3 {
  width: 100%;
  background: #28883e;
  padding: 35px 0;
}

#service_s1.section {
  padding: 60px 0 40px;
}

#service #service_s1  h3 {
  width: calc(980px - 20px);
  margin: 0 auto 20px;
}

#service .ser_naviArea {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#service .ser_naviArea {
  width: 980px;
  margin: 10px auto 0;
}
#service .ser_naviArea li {
  width: 18%;
  font-weight: bold;
  text-align: center;
  background: #3ba453;
  margin: 0 1%;
  padding: 5px 0;
  border-radius: 8px;
  -moz-box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}
#service .ser_naviArea li a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}
#service .ser_naviArea li:hover {
  opacity: 0.85;
}

#service_s2 .boxTop {
  width: 980px;
  margin: 0 auto 50px;
}

#service_s2 .boxLeft {
  width: 45%;
}
#service_s2 .boxRight {
  padding-left: 20px;
}

#service_s3.section {
  width: 980px;
  margin: 60px auto;
}

#service_s3 ul li {
  width: auto;
  margin: 0 0 10px 0;
  padding: 30px 85px 30px;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
}

#service_s3 ul .boxLeft {
  width: 40%;
}
#service_s3 ul .boxRight {
  width: auto;
  padding: 30px 0 0 20px;
}

#service_s3 ul li.merit1 {
  background: url(../img/common/img_flowico_01-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}
#service_s3 ul li.merit2 {
  background: url(../img/common/img_flowico_02-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}
#service_s3 ul li.merit3 {
  background: url(../img/common/img_flowico_03-min.png) 0 0 no-repeat, url(../img/home/bg_square02.gif) 0 0 repeat
}

#service_s6 table {
  width: 980px;
  margin: 0 auto;
}

#service_s6 table th, #service_s6 table td {
  border: 1px solid #fff;
  vertical-align: top;
}
#service_s6 table th {
  font-weight: bold;
  font-size: 120%;
  background: #7fbc8d;
  padding: 15px;
}
#service_s6 table td {
  background: #d3edd9;
  padding: 15px 15px 30px 15px;
}
#service_s6 table th.h-th {
  text-align: center;
  vertical-align: middle;
}
#service_s6 table th.v-th {
  text-align: center;
  vertical-align: top;
}
#service_s6 table th.n-th {
  background: #fff;
}
#service_s6 table .cellLeft {
  width: 16%;
}
#service_s6 table .cellCenter, #service_s6 table .cellRight {
  width: 42%;
}

#service_s7 .boxTop {
  width: 980px;
  margin: 0 auto;
}
#service_s7 .boxLeft {
  width: 45%;
}
#service_s7 .boxRight {
  padding-left: 20px;
}
#service_s7 .btn {
  margin: 40px auto 0;
  text-align: center;
}

#service_s8.section {
  padding: 80px 0;
  background: #C4D8E4;
}
#service_s8 .btn {
  margin: 0 auto;
  text-align: center;
}