@charset "UTF-8";
/*基本の青*/
/*薄い青*/
/*薄いグレー*/
/*収納*/
/*発行*/
/*発行用薄い色*/
/*スマホメニューの色*/
/*スマホメニューの色*/
.bannerbox {
  margin-bottom: 40px;
}

#mainimg {
  margin-bottom: 110px;
}
#mainimg .scrollbox {
  width: 60px;
  position: relative;
}
#mainimg .scrollbox .scrollitem {
  position: absolute;
  bottom: 377px;
  left: 20px;
}
#mainimg .scrollbox .scrollitem:after {
  position: absolute;
  bottom: -120px;
  left: 3px;
  content: "";
  width: 1px;
  height: 100px;
  background-color: #333;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-animation: extend 1.5s linear 0s infinite alternate none running;
          animation: extend 1.5s linear 0s infinite alternate none running;
}
#mainimg .mainimgbox {
  width: calc(100% - 60px);
  height: 80vh;
  position: relative;
}
#mainimg .mainimgbox .imgbox01 {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
}
#mainimg .mainimgbox .imgbox02 {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
  width: 80%;
}
#mainimg .mainimgbox .imgbox02 .slick {
  height: 60vh;
}
#mainimg .mainimgbox .imgbox02 li {
  width: 80%;
  height: 60vh;
}
#mainimg .mainimgbox .imgbox02 li.slide01 {
  background: url(../images/top/mainimg01_01.webp) bottom right no-repeat;
  background-size: cover;
}
#mainimg .mainimgbox .imgbox02 li.slide02 {
  background: url(../images/top/mainimg01_02.webp) bottom right no-repeat;
  background-size: cover;
}
#mainimg .mainimgbox .imgbox02 li.slide03 {
  background: url(../images/top/mainimg01_03.webp) bottom right no-repeat;
  background-size: cover;
  position: relative;
}
#mainimg .mainimgbox .imgbox02 li.slide03 .overimg {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 140px;
}
#mainimg .mainimgbox .imgbox03 {
  position: absolute;
  top: 150px;
  left: 1vw;
  z-index: 3;
  -webkit-animation: fadeIn 2s ease 1s 1 normal backwards;
          animation: fadeIn 2s ease 1s 1 normal backwards;
  width: 30.5vw;
}

@-webkit-keyframes extend {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes extend {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateXY(0);
            transform: translateXY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateXY(0);
            transform: translateXY(0);
  }
}
#contents01 {
  margin-bottom: 110px;
}
#contents01 p {
  margin-bottom: 30px;
  text-align: left;
}
#contents01 p.last-chile {
  margin-bottom: 0px;
}
#contents01 p.readtext {
  font-size: 1.2em;
}
#contents01 .messgebox {
  border-left: 1px #bec2c8 solid;
  padding-left: 25px;
}

#contents02 {
  margin-bottom: 110px;
}
#contents02 h2 {
  text-align: left;
  margin-bottom: 30px;
}
#contents02 dl {
  text-align: left;
  border-top: 1px #aeb2be solid;
  padding-top: 15px;
}
#contents02 dl dt {
  width: 19em;
  float: left;
}
#contents02 dl dt .newsdays {
  display: inline-block;
  width: 10em;
}
#contents02 dl dt .category {
  padding: 5px 10px;
  color: #fff;
  display: inline-block;
  width: 8em;
  font-size: 0.9em;
  line-height: 1;
  text-align: center;
}
#contents02 dl dt .category.category01 {
  background-color: #2983ba;
}
#contents02 dl dt .category.category02 {
  background-color: #007194;
}
#contents02 dl dd {
  padding-left: 20em;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px #aeb2be solid;
}

#contents03 h2 {
  margin-bottom: 30px;
}
#contents03 h2 img {
  margin-bottom: 20px;
}
#contents03 .servicebox {
  width: 48%;
}
#contents03 .servicebox .imgbox {
  height: 278px;
}
#contents03 .servicebox .linkbox a {
  padding: 20px;
  color: #fff;
  text-align: left;
  display: block;
  position: relative;
}
#contents03 .servicebox .linkbox a:hover {
  opacity: 0.7;
}
#contents03 .servicebox .linkbox a:after {
  content: "";
  background: url(../images/common/linkicon.svg) 0 0 no-repeat;
  background-size: cover;
  width: 7px;
  height: 11px;
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#contents03 .servicebox.service_a .imgbox {
  background: url(../images/top/service_a.jpg) 0 0 no-repeat;
  background-size: cover;
}
#contents03 .servicebox.service_a .linkbox a {
  background-color: #00cdff;
}
#contents03 .servicebox.service_b .imgbox {
  background: url(../images/top/service_b.jpg) 0 0 no-repeat;
  background-size: cover;
}
#contents03 .servicebox.service_b .linkbox a {
  background-color: #ff3366;
}
#contents03 .textlinkbox {
  max-width: 532px;
  margin: 100px auto;
}
#contents03 .textlinkbox a {
  background-color: #82a2e9;
  padding: 20px;
  color: #fff;
  text-align: left;
  display: block;
  position: relative;
  line-height: 1.8;
}
#contents03 .textlinkbox a:hover {
  opacity: 0.7;
}
#contents03 .textlinkbox a:after {
  content: "";
  background: url(../images/common/linkicon.svg) 0 0 no-repeat;
  background-size: cover;
  width: 7px;
  height: 11px;
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#contents04 {
  padding-bottom: 100px;
}
#contents04 .linkbox {
  width: 31.25%;
  height: 600px;
  position: relative;
}
#contents04 .linkbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#contents04 .linkbox a {
  display: block;
  width: 100%;
  height: 100%;
}
#contents04 .linkbox a:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
#contents04 .linkbox.linkbox_a {
  background: url(../images/top/linkbg01.webp) bottom right no-repeat;
  background-size: cover;
}
#contents04 .linkbox.linkbox_b {
  background: url(../images/top/linkbg02.webp) bottom right no-repeat;
  background-size: cover;
}
#contents04 .linkbox.linkbox_c {
  background: url(../images/top/linkbg03.webp) bottom right no-repeat;
  background-size: cover;
}

.contactbox {
  background: url(../images/common/contact_bg.jpg) center bottom no-repeat;
  background-size: cover;
  padding: 70px 0;
  color: #fff;
}
.contactbox .contact_ttl {
  margin-bottom: 35px;
}
.contactbox .contact_btn {
  margin-bottom: 20px;
}
.contactbox .contact_btn a {
  background-color: rgba(94, 101, 126, 0.5);
  padding: 30px;
  border: 1px #fff solid;
  display: block;
  max-width: 643px;
  margin: 0 auto;
  line-height: 1;
}
.contactbox .contact_btn a img {
  height: 18px;
}
.contactbox .contact_btn a:hover {
  background-color: rgba(94, 101, 126, 0.3);
}
.contactbox .contact_btn a:hover img {
  opacity: 0.7;
}

.no-webp #mainimg .imgbox02 li.slide01 {
  background: url(../images/top/mainimg01_01.jpg) 0 0 no-repeat;
  background-size: cover;
}
.no-webp #mainimg .imgbox02 li.slide02 {
  background: url(../images/top/mainimg01_02.jpg) 0 0 no-repeat;
  background-size: cover;
}
.no-webp #mainimg .imgbox02 li.slide03 {
  background: url(../images/top/mainimg01_03.jpg) 0 0 no-repeat;
  background-size: cover;
}
.no-webp #contents04 .linkbox.linkbox_a {
  background: url(../images/top/linkbg01.jpg) 0 0 no-repeat;
  background-size: cover;
}
.no-webp #contents04 .linkbox.linkbox_b {
  background: url(../images/top/linkbg02.jpg) 0 0 no-repeat;
  background-size: cover;
}
.no-webp #contents04 .linkbox.linkbox_c {
  background: url(../images/top/linkbg03.jpg) 0 0 no-repeat;
  background-size: cover;
}

@media screen and (max-width: 840px) {
  .bannerbox {
    margin-top: 20px;
  }

  #mainimg {
    margin-bottom: 40px;
  }
  #mainimg .flexbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #mainimg .scrollbox {
    width: 40px;
  }
  #mainimg .scrollbox .scrollitem {
    bottom: 277px;
  }
  #mainimg .mainimgbox {
    width: calc(100% - 40px);
    height: 70vh;
  }
  #mainimg .mainimgbox .imgbox01 {
    width: 80vw;
    text-align: left;
  }
  #mainimg .mainimgbox .imgbox02 {
    width: 95%;
  }
  #mainimg .mainimgbox .imgbox02 li.slide01 {
    background: url(../images/top/mainimg01_01_sp.webp) 0 0 no-repeat;
    background-size: cover;
  }
  #mainimg .mainimgbox .imgbox02 li.slide02 {
    background: url(../images/top/mainimg01_02_sp.webp) 0 0 no-repeat;
    background-size: cover;
  }
  #mainimg .mainimgbox .imgbox02 li.slide03 {
    background: url(../images/top/mainimg01_03_sp.webp) center center no-repeat;
    background-size: cover;
  }
  #mainimg .mainimgbox .imgbox03 {
    top: 50px;
    left: -20px;
    width: 70vw;
  }

  .contactbox {
    padding: 60px 30px;
  }
  .contactbox p {
    margin-bottom: 20px;
  }
  .contactbox .contact_btn a {
    width: 60vw;
    padding: 20px;
  }
  .contactbox .contact_ttl img {
    height: 20px;
  }

  #contents01 .messgebox {
    padding-left: 15px;
  }
  #contents01 p {
    margin-bottom: 20px;
  }
  #contents01 p.readtext {
    font-size: 1.1em;
  }

  #contents02 dl dt {
    width: 100%;
    margin-bottom: 10px;
  }
  #contents02 dl dd {
    padding-left: 0;
  }

  #contents03 {
    margin-bottom: 60px;
  }
  #contents03 .servicebox {
    width: 100%;
    margin-bottom: 20px;
  }
  #contents03 .servicebox .imgbox {
    height: 200px;
  }
  #contents03 .textlinkbox {
    margin: 0px auto;
    max-width: 100%;
  }

  #contents04 {
    padding-bottom: 60px;
  }
  #contents04 .contentsinner2 {
    padding: 0;
  }
  #contents04 .linkbox {
    width: 100%;
    height: 160px;
    margin-bottom: 20px;
  }
  #contents04 .linkbox img {
    height: 50px;
  }
  #contents04 .linkbox.linkbox_a {
    background: url(../images/top/linkbg01_sp.webp) 0 0 no-repeat;
    background-size: cover;
  }
  #contents04 .linkbox.linkbox_b {
    background: url(../images/top/linkbg02_sp.webp) 0 0 no-repeat;
    background-size: cover;
  }
  #contents04 .linkbox.linkbox_c {
    background: url(../images/top/linkbg03_sp.webp) 0 0 no-repeat;
    background-size: cover;
  }

  .contactbox .contact_btn a img {
    width: 30vw;
  }

  .no-webp #mainimg .imgbox02 li.slide01 {
    background: url(../images/top/mainimg01_01_sp.jpg) 0 0 no-repeat;
    background-size: cover;
  }
  .no-webp #mainimg .imgbox02 li.slide02 {
    background: url(../images/top/mainimg01_02_sp.jpg) 0 0 no-repeat;
    background-size: cover;
  }
  .no-webp #mainimg .imgbox02 li.slide03 {
    background: url(../images/top/mainimg01_03_sp.jpg) center center no-repeat;
    background-size: cover;
  }
  .no-webp #contents04 .linkbox.linkbox_a {
    background: url(../images/top/linkbg01_sp.jpg) 0 0 no-repeat;
    background-size: cover;
  }
  .no-webp #contents04 .linkbox.linkbox_b {
    background: url(../images/top/linkbg02_sp.jpg) 0 0 no-repeat;
    background-size: cover;
  }
  .no-webp #contents04 .linkbox.linkbox_c {
    background: url(../images/top/linkbg03_sp.jpg) 0 0 no-repeat;
    background-size: cover;
  }
}
@media (orientation: portrait) {
  .ipad #mainimg .mainimgbox .imgbox02 .slick {
    height: 55vh;
  }
  .ipad #mainimg .mainimgbox .imgbox02 li {
    height: 55vh;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .ipad #mainimg .mainimgbox .imgbox02 {
    width: 90vw;
  }
  .ipad #mainimg .mainimgbox .imgbox03 {
    width: 50vw;
  }
}
@media only screen and (min-device-width: 835px) and (max-device-width: 1024px) and (orientation: portrait) {
  .ipad #mainimg .mainimgbox .imgbox02 {
    width: 90vw;
  }
  .ipad #mainimg .mainimgbox .imgbox02 .slick {
    height: 65vh;
  }
  .ipad #mainimg .mainimgbox .imgbox02 li {
    height: 65vh;
  }
}