@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap";
@charset "UTF-8";

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-feature-settings: "palt";
  letter-spacing: .05em;
  line-height: 1.8;
  color: #333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  margin: 0 auto;
}

html {
  // viewport 375px のとき font-size 16px
  font-size: calc(100vw * 16 / 375);

  @media (min-width: 768px) {
    // viewport 768px のとき font-size 16px
    font-size: calc(100vw * 16 / 768);
  }

  /*@media (min-width: 1240px) {
    // viewport 1240px のとき font-size 18px
    font-size: calc(100vw * 18 / 1240);
  }
  @media (min-width: 1440px) {
    // viewport 1440px のとき font-size 20px
    font-size: calc(100vw * 20 / 1440);
  }*/
}

a img.blight {
  transition: opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
}

a:hover img.blight {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
}

a {
  text-decoration: none;
  color: #444;
  transition: opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
}

a:hover {
  text-decoration: none;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
}


*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


img {
  max-width: 100%;
}

.pcnone {
  display: none !important;
}

.spnone {
  display: block !important;
}

.bold {
  font-weight: 500;
}

.txtBlue {
  color: #003589;
}

.txtYellow {
  color: #E0B338;
}

.txtWhite {
  color: #fff;
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.tac {
  text-align: center;
}

.sup {
  vertical-align: top;
  font-size: 12px;
}

.subtxt {
  font-size: smaller;
  margin-bottom: 8px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

header {
  background: #003589;
  position: fixed;
  width: 70px;
  display: block;
  width: 100%;
  z-index: 9998;
}

header .inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  height: 70px;
  padding: 0 12px;
}

header .h1 {
  padding: 24.2px 0;
  line-height: 1;
}

header .cv_btn {
  position: absolute;
  right: 12px;
  top: 0;
  padding: 19px 0;
}

header .cv_btn a {
  display: block;
}

.kv {
  background: url('../images/kv_bg.jpg') center center no-repeat;
  height: 630px;
  background-size: cover;
  padding: 70px 0 0 0;
  box-sizing: content-box;
}

.kv .kv_area {
  position: relative;
  z-index: 2;
  height: 630px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 12px;
}

.kv .kv_area .kv_box {
  padding-top: 40px;
  background: url('../images/crown_pc.png') right bottom no-repeat;
  background-size: 398px;
}

.kv .kv_area h2 {
  color: #fff;
  font-size: 54px;
  line-height: 1.4;
  padding-left: 0;
  font-weight: 500;
  letter-spacing: .1em;
  margin-bottom: 10px;
}

.kv .kv_area small {}

.kv .kv_area p {
  color: #fff;
  font-size: 16px;
}

.kv .kv_area p+p {
  font-weight: 300;
}

.kv .kv_area .underline {
  font-size: 24px;
  border-bottom: 1px solid #fff;
  display: inline-block;
  letter-spacing: .1em;
  padding-bottom: 4px;
  font-weight: 500;
}

.kv .kv_area .cv_btn {
  padding: 0;
}

.kv .kv_area .cv_btn a {
  display: block;
  text-align: left;
}

h2 {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 0 12px;
}

.bg_gray {
  background: #F2F4F9;
}

#sec1 {
  margin: 0 auto;
  padding: 100px 0 5px 0;
  position: relative;
}

#sec1 h2 {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

#sec1 .bg {
  background: #F2F4F9;
  padding: 70px 0 0 0;
}

#sec1 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec1 ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
  padding: 15px 0 0 0;
}

#sec1 ul li {
  margin: 0 30px 60px 0;
}

#sec1 ul li:nth-child(3) {
  margin-right: 0;
}

#sec1 ul li:nth-child(3) p+p {
  padding: 28px 0;
}

#sec1 ul li .box_a {
  background: #fff;
  position: relative;
  padding: 15px 0 8px;
  min-height: 137px;
}

#sec1 ul li .box_a .tag {
  font-size: 18px;
  color: #003589;
  background: #003589;
  width: 190px;
  padding: 0;
  border-radius: 17px;
  color: #fff;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

#sec1 ul li .box_a p {
  padding: 10px 0;
  font-size: 16px;
}

#sec1 ul li .box_a:after {
  position: absolute;
  content: "";
  background: url('../images/sec1_arrow.svg') no-repeat;
  width: 30px;
  height: 16px;
  bottom: -16px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#sec1 ul li .box_b {
  background: #fff;
  margin-top: 25px;
  box-shadow: 0px 8px 20px 5px #dedede;
  border-radius: 0px;
}

#sec1 ul li .box_b p {
  color: #003589;
  padding: 10px 0;
  font-size: 16px;
}

#sec2 {
  background: url('../images/sec2_bg.jpg') center center no-repeat;
  background-size: cover;
  padding: 50px 0;
}

#sec2 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec3 {
  padding: 80px 0;
}

#sec3 h2 {
  margin-bottom: 60px;
}

#sec3 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec3 .box01 {
  background: url('../images/sec3_box01_bg.png') no-repeat;
  background-size: 48%;
  background-position: -20% 35px;
  padding-bottom: 50px;
}

#sec3 .box01 .box_content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#sec3 .box01 .box_content .txt {
  width: 62%;
  background: url('../images/01.svg') no-repeat;
  background-position: left -25px;
  padding: 15px 0 0 10%;
}

#sec3 .box01 .box_content .txt h3 {
  font-size: 24px;
  color: #003589;
  font-weight: 500;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

#sec3 .box01 .box_content .txt h3 strong {
  font-size: 36px;
}

#sec3 .box01 .box_content p.subtxt {
  color: #003589;
}

#sec3 .box01 .box_content .txt .docbox ul li {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}

#sec3 .box01 .box_content .img {
  width: 38%;
}

#sec3 .box01 .box_image {
  text-align: center;
  width: 768px;
  margin: 0 auto;
}

#sec3 .box02 {
  background: url('../images/sec3_box02_bg.png') no-repeat;
  background-size: 48%;
  background-position: right 35px;
  padding-bottom: 50px;
}

#sec3 .box02 .box_content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row-reverse;
}

#sec3 .box02 .box_content .txt {
  width: 60%;
  background: url('../images/02.svg') no-repeat;
  background-position: left -25px;
  padding: 75px 0 0 0;
}

#sec3 .box02 .box_content .txt h3 {
  font-size: 24px;
  color: #003589;
  font-weight: 500;
  letter-spacing: .08em;
}

#sec3 .box02 .box_content .txt h3 strong {
  font-size: 36px;
}

#sec3 .box02 .box_content .txt .docbox ul li {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}

#sec3 .box02 .box_content .img {
  width: 40%;
}

#sec3 .box02 .box_image {
  text-align: center;
  width: 768px;
  margin: 0 auto;
}

#sec3 .box03 {
  background: url('../images/sec3_box03_bg.png') no-repeat;
  background-size: 48%;
  background-position: -12% 35px;
}

#sec3 .box03 .box_content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#sec3 .box03 .box_content .txt {
  width: 53%;
  background: url('../images/03.svg') no-repeat;
  background-position: left -25px;
  padding: 15px 0 0 12%;
}

#sec3 .box03 .box_content .txt h3 {
  font-size: 24px;
  color: #003589;
  font-weight: 500;
  letter-spacing: .08em;
}

#sec3 .box03 .box_content .txt h3 strong {
  font-size: 36px;
}

#sec3 .box03 .box_content .txt .docbox ul li {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}

#sec3 .box03 .box_content .img {
  width: 47%;
}

#sec3 .box03 .box_image {
  text-align: center;
  width: 768px;
  margin: 0 auto;
}

#sec4 {
  padding: 80px 0;
}

#sec4 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec4 ul {
  margin-top: 60px;
}

/*成功事例*/
#sec5 {
  padding: 80px 0 160px;
  background: url('../images/sec5_bg_pc.jpg') center bottom no-repeat;
  background-size: 100% 50%;
  overflow: hidden;
}

#sec5 h2 {
  margin-bottom: 30px;
}

#sec5 p.subtxt {
  font-size: 18px;
  text-align: center;
  margin-bottom: 30px;
}

#sec5 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec5 .slider {}

#sec5 .slick-slide {}

#sec5 .slick-slide .box_inner {
  position: relative;
  background: #fff;
  box-shadow: 0px 0px 10px 5px #0000001a;
  border-radius: 0px;
  width: 460px;
  min-height: 504px;
  margin: 25px;
  padding: 20px 30px;
}

#sec5 .box_inner .case {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #E6EBF3;
}

#sec5 .box_inner .case:before {
  border-top: 2px solid #E6EBF3;
  content: "";
  width: 0;
  /* 線の長さ */
}

#sec5 .box_inner .case:after {
  border-top: 2px solid #E6EBF3;
  content: "";
  width: 100%;
  /* 線の長さ */
}

#sec5 .box_inner .case:before {
  margin-right: 0;
  /* 文字の右隣 */
}

#sec5 .box_inner .case:after {
  margin-left: 1em;
  /* 文字の左隣 */
}

#sec5 .box_inner h3 {
  font-size: 24px;
  color: #003589;
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: ;
  line-height: 1.2;
  letter-spacing: .08em;
}

#sec5 .box_inner .tag {
  color: #003589;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

#sec5 .box_inner .tag span {
  border: 1px solid #003589;
  border-radius: 15px;
  padding: 2px 9px 3px 9px;
  margin-right: 7px;
}

#sec5 .box_inner .lead {
  font-size: 24px;
  color: #003589;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.5;
}

#sec5 .box_inner .cat {
  font-size: 13px;
  color: #003589;
  padding: 2% 3%;
  background: #F2F4F9;
}

#sec5 .more_btn {
  position: absolute;
  width: 242px;
  height: 40px;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#sec5 .more_btn a {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #003589;
  color: #003589;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  padding: 11.5px 0;
}

/*modaal-container*/
.modaal-container {
  color: #003589;
  position: relative;
  background: #fff;
  /*box-shadow: 0px 0px 10px 5px #dedede;*/
  border-radius: 0px;
  width: 588px;
  min-height: 470px;
  margin: 25px;
  padding: 15px 30px;
}

.modaal-content-container {
  padding: 0;
}

.modaal-container .case {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #E6EBF3;
}

.modaal-container .case:before {
  border-top: 2px solid #E6EBF3;
  content: "";
  width: 0;
  /* 線の長さ */
}

.modaal-container .case:after {
  border-top: 2px solid #E6EBF3;
  content: "";
  width: 100%;
  /* 線の長さ */
}

.modaal-container .case:before {
  margin-right: 0;
  /* 文字の右隣 */
}

.modaal-container .case:after {
  margin-left: 1em;
  /* 文字の左隣 */
}

.modaal-container h3 {
  font-size: 24px;
  color: #003589;
  margin-bottom: 5px;
}

.modaal-container .tag {
  color: #003589;
  font-size: 12px;
  margin-bottom: 5px;
}

.modaal-container .tag span {
  border: 1px solid #003589;
  border-radius: 15px;
  padding: 5px 15px;
  margin-right: 10px;
}

.modaal-container .lead {
  font-size: 24px;
  color: #003589;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.5;
}

.modaal-container .cat {
  font-size: 15px;
  color: #003589;
  padding: 0% 1%;
  background: #E6EBF3;
  font-weight: 700;
  margin-bottom: 4px;
}

.modaal-container .cat+p {
  font-size: 16px;
  line-height: 2;
}

.modaal-close {
  top: 50px;
}

/*導入事例*/
#sec6 {
  padding: 80px 0;
}

#sec6 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec6 ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: left;
  padding: 60px 0 0 0;
}

#sec6 ul li {
  position: relative;
  width: 46.9%;
  height: 733px;
  background: #fff;
  box-shadow: 0px 8px 20px 5px #dedede;
  border-radius: 0px;
}

#sec6 ul li .txtbox {
  padding: 30px;
  font-size: 15px;
  position: relative;
}

#sec6 ul li .txtbox .com_label {
  position: absolute;
  top: -15px;
  left: 5%;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  background: #003589;
  padding: 4px 8px;
}

#sec6 ul li .cmt_txt {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 10px;
  letter-spacing: .08em;
}

#sec6 ul li .info_txt p.underline+p {
  line-height: 1.5;
  margin-top: 2px;
  margin-bottom: 5px;
}

#sec6 ul li .info_txt p.underline {
  border-bottom: 1px solid #BFCCE1;
}

#sec6 .more_btn {
  position: absolute;
  width: 242px;
  height: 40px;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#sec6 .more_btn a {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #003589;
  color: #003589;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding: 11.5px 0;
}

/*よくあるご質問*/
#sec7 {
  padding: 80px 0;
}

#sec7 h2 {
  margin-bottom: 60px;
}

#sec7 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

.ac>li {
  /* margin-bottomにすると変な動きをするのでpaddingにする */
  padding: 10px 10px 10px 20px;
  list-style: none;
  border-top: 2px solid #ddd;
}

.ac-label {
  cursor: pointer;
  position: relative;
}

.ac-label p {
  color: #003589;
  font-size: 18px;
  font-weight: 500;
  padding-left: 40px;
  padding-right: 68px;
}

.ac-label p span {
  color: #7F9AC4;
  margin-right: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

.ac-content {
  display: none;
}

.ac-content p {
  padding-left: 40px;
  padding-right: 70px;
  margin-top: 10px;
}

/* .ac-labelを親要素としてアイコン位置を絶対値で指定 */
.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
  background: #fff;
}

/* .icon-wrapの中でプラスを中央に位置させるために.iconを親要素に設定 */
.icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* プラスアイコン */
/* ２本の線を.icon-wrapの中央に並行に重ねる */
.icon:before,
.icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #003589;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 3px;
  transform: translate(-50%, -50%);
}

/* そのうち1本を縦にする */
.icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* プラスアイコンクリック後、マイナスにする */
.icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

/*代表挨拶*/
#sec8 {
  padding: 0;
}

#sec8 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec8 .arc01 {
  padding: 60px 0;
}

#sec8 .arc01 h2 {
  font-size: 30px;
  font-family: serif;
  font-weight: 500;
  color: #003589;
  letter-spacing: 2.5px;
}

#sec8 .arc01 .inner {
  max-width: 1000px;
  padding: 0 12px;
  margin: 0 auto;
}

#sec8 .arc01 .flxbox {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 40px;
}

#sec8 .arc01 .flxbox .leftbox {
  flex-basis: 25%;
  padding-right: 60px;
}

#sec8 .arc01 .flxbox .leftbox img {
  box-shadow: 1px 1px 3px 0 #999;
}

#sec8 .arc01 .flxbox .rightbox {
  flex-basis: 75%;
}

#sec8 .arc02 {
  padding: 80px 0;
}

#sec8 .arc02 .flxbox {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#sec8 .arc02 .flxbox .leftbox {
  flex-basis: 47%;
}

#sec8 .arc02 .flxbox .rightbox {
  flex-basis: 47%;
}

#sec8 .arc02 h3 {
  font-size: 18px;
  font-family: sans-serif;
  font-weight: 700;
  color: #003589;
  margin-bottom: 30px;
}

#sec8 .arc02 p,
#sec8 .arc02 dl {
  font-size: 14px;
}

#sec8 .com_in_in dl {
  display: flex;
  line-height: 1.6;
  padding: 18px 0;
  border-bottom: 1px solid #7F99C4;
}

#sec8 .com_in_in dt {
  width: 110px;
}

footer {
  background: #003589;
  padding: 10px 10px 4px;
  color: #fff;
  font-size: 13px;
}

footer ul {
  text-align: center;
  margin-bottom: 5px;
}

footer ul li {
  display: inline-block;
  padding: 0 30px;
}

footer small {
  display: block;
  text-align: center;
  font-size: 13px;
}

footer a {
  color: #fff;
  text-decoration: none;
}

@media (min-width: 768px) {
  body {
    min-width: 1000px;
  }
}

@media (max-width:767px) {
  .pcnone {
    display: block !important;
  }

  .spnone {
    display: none !important;
  }

  .subtxt {
    font-size: 0.75rem;
  }

  header {
    background: #003589;
    position: fixed;
    width: 70px;
    display: block;
    width: 100%;
    z-index: 9998;
  }

  header .inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 60px;
    padding: 0 4%;
  }

  header .h1 {
    padding: 19.1px 0;
    line-height: 1;
  }

  header .cv_btn {
    padding: 14px 0;
    right: 4%;
  }

  .kv {
    background: url('../images/kv_bg_sp.jpg') center center no-repeat;
    height: 617px;
    background-size: cover;
    padding: 60px 0 0 0;
    box-sizing: content-box;
  }

  .kv .kv_area {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  .kv .kv_area .kv_box {
    padding-top: 30px;
    background: none;
  }

  .kv .kv_area h2 {
    color: #fff;
    font-size: 1.875rem;
    line-height: 1.5;
    letter-spacing: .06em;
  }

  .kv .kv_area small {}

  .kv .kv_area p {
    color: #fff;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
  }

  .kv .kv_area .underline {
    font-size: 1rem;
    letter-spacing: 2px;
    border-bottom: 1px solid #fff;
    display: inline-block;
  }

  .kv .kv_area .mb40 {
    margin-bottom: 20px !important;
  }

  .kv .kv_area .cv_btn {
    padding: 15px 0 0 0;
  }

  .kv .kv_area .cv_btn a {
    display: block;
    text-align: center;
  }

  h2 {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  #sec1 h2 img {
    max-width: 224px;
  }

  /*#sec2 h2 img {max-width:344px;}*/
  /*#sec3 h2 img {max-width:280px;}*/
  #sec4 h2 img {
    max-width: 183px;
  }

  #sec5 h2 img {
    max-width: 122px;
  }

  #sec6 h2 img {
    max-width: 122px;
  }

  #sec7 h2 img {
    max-width: 214px;
  }

  /*.kv .cv_btn img {max-width:343px;}*/

  #sec1 {
    margin: 0 auto;
    padding: 80px 0 0 0;
    position: relative;
  }

  #sec1 h2 {
    top: 25px;
  }

  #sec1 .bg {
    background: #F2F4F9;
    padding: 35px 0 0 0;
  }

  #sec1 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec1 ul {
    display: block;
  }

  #sec1 ul li {
    margin: 0 0 50px 0;
  }

  #sec1 ul li:nth-child(3) {
    margin-right: 0;
  }

  #sec1 ul li:nth-child(3) p+p {
    padding: 10px 0;
  }

  #sec1 ul li .box_a {
    min-height: auto;
  }

  #sec1 ul li .box_a .tag {
    font-size: 1rem;
  }

  #sec1 ul li .box_a p {
    font-size: 0.875rem;
  }

  #sec1 ul li .box_b img {
    display: none;
  }

  #sec1 ul li .box_b p {
    font-size: 0.875rem;
  }

  #sec2 {
    padding: 30px 0;
  }

  #sec2 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec3 {
    padding: 30px 0;
  }

  #sec3 h2 {
    margin-bottom: 30px;
  }

  #sec3 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec3 .box01,
  #sec3 .box02,
  #sec3 .box03 {
    background: none;
  }

  #sec3 .box01 .spimg img,
  #sec3 .box02 .spimg img,
  #sec3 .box03 .spimg img {
    width: 100%;
    max-width: 767px;
  }

  #sec3 .box01 .box_content,
  #sec3 .box02 .box_content,
  #sec3 .box03 .box_content {
    display: block;
  }

  #sec3 .box01 .box_content .txt,
  #sec3 .box02 .box_content .txt,
  #sec3 .box03 .box_content .txt {
    background: none;
    width: 100%;
    padding: 20px 0 0 0;
  }

  #sec3 .box01 .box_content .txt p,
  #sec3 .box02 .box_content .txt p,
  #sec3 .box03 .box_content .txt p {
    font-size: 0.9375rem;
  }

  #sec3 .box01 .box_content .txt h3 {
    font-size: 1.25rem;
    margin-bottom: 0px;
  }

  #sec3 .box01 .box_content .txt h3 strong {
    font-size: 1.5rem;
  }

  #sec3 .box01 .box_content p.subtxt {
    font-size: 0.7rem;
  }

  #sec3 .box02 .box_content .txt h3 {
    font-size: 1.25rem;
  }

  #sec3 .box02 .box_content .txt h3 strong {
    font-size: 1.5rem;
  }

  #sec3 .box03 .box_content .txt h3 {
    font-size: 1.25rem;
  }

  #sec3 .box03 .box_content .txt h3 strong {
    font-size: 1.5rem;
  }


  #sec3 .box01 .box_content .txt .docbox ul li,
  #sec3 .box03 .box_content .txt .docbox ul li {
    padding: 1px;
  }

  #sec3 .box01 .box_content .txt .docbox ul li img,
  #sec3 .box03 .box_content .txt .docbox ul li img {
    width: 90%;
  }

  #sec3 .box01 .box_image,
  #sec3 .box02 .box_image,
  #sec3 .box03 .box_image {
    margin: 20px auto 0;
    width: 100%;
  }

  #sec3 .box01 .box_image {
    width: 100%;
  }


  #sec4 {
    padding: 30px 0;
  }

  #sec4 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec4 ul {
    margin-top: 30px;
  }

  #sec4 ul li {
    background: #fff;
    padding: 2% 4% 4%;
    margin-bottom: 18px;
    position: relative;
  }

  #sec4 ul li:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 15px 0 15px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -26px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  #sec4 ul li:last-child:after {
    display: none;
  }

  #sec4 ul li h3 {
    font-size: 1rem;
    color: #003589;
    text-align: center;
  }

  #sec4 ul li p {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  #sec5 {
    padding: 30px 0;
    background: url(../images/sec5_bg.x2_sp.jpg) center bottom no-repeat;
    background-size: 100%;
  }

  #sec5 h2 {
    margin-bottom: 20px;
  }

  #sec5 p.subtxt {
    font-size: 0.9375rem;
  }

  #sec5 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec5 .slick-slide .box_inner {
    width: 320px;
    padding: 20px;
  }

  #sec5 .box_inner h3 {
    font-size: 1.125rem;
    margin-bottom: 0px;
  }

  #sec5 .box_inner .lead {
    font-size: 1.125rem;
  }

  #sec5 .box_inner .tag {
    margin-bottom: 4px;
  }

  #sec5 .box_inner .tag span {
    border: none;
    border-radius: 15px;
    padding: 0;
    margin-right: 7px;
  }


  /*modaal-container*/
  .modaal-inner-wrapper {
    padding: 100px 4%;
  }

  .modaal-container {
    color: #003589;
    position: relative;
    background: #fff;
    box-shadow: 0px 0px 10px 5px #dedede;
    border-radius: 0px;
    width: 340px;
    min-height: 470px;
    margin: 0;
    padding: 15px 20px;
  }

  .modaal-container h3 {
    font-size: 1.125rem;
  }

  .modaal-container .lead {
    font-size: 1.125rem;
  }

  .modaal-container .txt {
    font-size: 0.9375rem;
    font-weight: 400;
  }


  #sec6 {
    padding: 30px 0 0;
  }

  #sec6 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec6 ul {
    padding: 30px 0 0 0;
  }

  #sec6 ul li {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }

  #sec6 ul li .txtbox {
    position: relative;
  }

  #sec6 ul li .txtbox .com_label {
    position: absolute;
    top: -15px;
    left: 5%;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #fff;
    background: #003589;
    padding: 4px 8px;
  }

  #sec6 ul li .cmt_txt {
    font-size: 1.125rem;
  }

  #sec6 ul li .info_txt {
    font-size: 0.875rem;
    margin-bottom: 10px;
  }

  #sec6 ul li img {
    width: 100%;
    max-width: 767px;
  }

  #sec6 .more_btn {
    position: static;
    height: 50px;
    margin: 0 auto 30px;
    transform: inherit;
    webkit-transform: inherit;
    -ms-transform: inherit;
  }

  #sec7 {
    padding: 30px 0;
    padding-bottom: 30px;
  }

  #sec7 h2 {
    margin-bottom: 30px;
  }

  #sec7 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  .ac>li {
    padding: 10px 0px 10px 5px;
  }

  .ac-label p {
    font-size: 0.9375rem;
    padding-left: 20px;
    padding-right: 50px;
  }

  .ac-content p {
    font-size: 0.9375rem;
    padding-left: 20px;
    padding-right: 50px;
  }

  .icon:before,
  .icon:after {
    width: 45%;
  }

  #sec8 .arc01 {
    padding: 30px 0;
  }

  #sec8 .arc01 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec8 .arc01 .flxbox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    margin-top: 20px;
  }

  #sec8 .arc01 .flxbox .rightbox {
    flex-basis: 100%;
    margin-bottom: 20px;
  }

  #sec8 .arc01 .flxbox .leftbox {
    flex-basis: 100%;
    padding-right: 0;
    padding-left: 68%;
  }

  #sec8 .arc02 {
    padding: 40px 0 60px;
  }

  #sec8 .arc02 .inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
  }

  #sec8 .arc02 .flxbox {
    display: block;
  }

  #sec8 .arc02 h3 {
    text-align: center;
    margin-bottom: 15px;
  }

  #sec8 .arc02 .flxbox .rightbox h3 {
    text-align: center;
    margin-bottom: 0;
  }

  #sec8 .arc02 .flxbox .rightbox {
    margin-top: 20px;
  }

  /*
12px 0.75rem
14px 0.875rem
15px 0.9375rem
16px 1rem
18px 1.125rem
20px 1.25rem
24px 1.5rem
30px 1.875rem

*/
}



/*#modal {display: none;}
#modal .wrap {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 9999;
background: rgba(0, 0, 0, 0.8);}
#modal .inner {position: relative;background: #fff;}
#modal .player {padding-top: 53.33333%;width: 100%;position: relative;}
#modal .player video {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
#modal .player video:focus {outline: none;}
#modal .close {position: absolute;right: 0;cursor: pointer;}
#modal .close img {width: 100%;height: auto;vertical-align: bottom;}

@media (min-width: 801px) {
  #modal .inner {width: 800px;}
  #modal .close {width: 30px;top: -50px;}
}
@media (max-width: 800px) {
  #modal .inner {width: 93.3333333vw;}
  #modal .close {width: 6.66666667vw;top: -9.33333333vw;}
}*/