/* ============================
mv
---------------------------- */
#mv {
  width: 100%;
  max-width: 218rem;
  margin: 0 auto;
  position: relative;
  margin-top: 8.8rem;
}
body.home #mv {
  height: 60rem;
  background-image: url(./img/bg_mv_home_pc.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}
body.archive #mv {
  height: 48rem;
  background-image:
  url(./img/bg_cloud1.png),
  url(./img/bg_mv_archive_pc.jpg);
  background-position:
  bottom -4rem center,
  top center;
  background-repeat:
  no-repeat,
  no-repeat;
}
#mv .inner.blog1-news {
  position: absolute;
  width: 90vw;
  max-width: 100.0rem;
  height: 9.6rem;
  padding: 0 3.0rem 0 7.0rem;
  bottom: -4.8rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
#mv .inner.blog1-news .blog1-news-box {
  width: calc(100% - 4.8rem - 3.0rem);
  height: 100%;
}
#mv .inner.blog1-news .blog1-news-box .lbl {
  color: var(--base-pink);
  font-size: 2rem;
  font-weight: var(--Bold);
}
#mv .inner.blog1-news .blog1-news-box .dat {
  font-family: var(--Roboto);
  font-size: 1.6rem;
  font-weight: var(--Medium);
}
#mv .inner.blog1-news .blog1-news-box .ttl {
  width: 60.0rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#mv .inner.blog1-news .blog1-news-box .ttl a {
  color: var(--base-pink);
  /* font-size: 2rem; */
  font-size: 1.6rem;
  font-style: normal;
  font-weight: var(--Bold);
}
#mv .inner.blog1-news .ico {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  background-image: url(./img/arrow-right-circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}
#mv .inner.blog1-news:hover .ico {
  transform: scale(1.1);
}

@media screen and (max-width: 1260px) {
  #mv {
    aspect-ratio: 1080 / 1808;
  }
  body.home #mv {
    height: auto;
    background-image: url(./img/bg_mv_home_sp.jpg);
    background-size: cover;
    background-position: center;
  }
}

@media screen and (max-width: 1040px) {
  #mv .inner.blog1-news {
    padding: 0 3.0rem;
  }
  #mv .inner.blog1-news .blog1-news-box {
    display: block;
    height: auto;
  }
  #mv .inner.blog1-news .blog1-news-box .lbl {
    width: 100%;
    font-size: 1.6rem;
  }
  #mv .inner.blog1-news .blog1-news-box .dat {
    width: 100%;
    font-size: 1.2rem;
  }
  #mv .inner.blog1-news .blog1-news-box .ttl {
    width: 100%;
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 767px) {
}

/* ============================
message
---------------------------- */
#message {
  width: 100%;
  padding: 16.0rem 2.78vw 0 2.78vw;
  background-image:
  url(./img/bg_message_photo.png),
  url(./img/bg_message.jpg);
  background-position:
  bottom center,
  top center;
  background-repeat:
  no-repeat,
  no-repeat;
  position: relative;
  z-index: 0;
}
#message .inner {
}
#message .inner h2.ttl {
  margin-bottom: 7.2rem;
}
#message .inner .cnt {
  text-align: center;
}
#message .inner .cnt .lead {
  font-size: 4rem;
  font-weight: var(--Medium);
  line-height: 9rem;
  margin-bottom: 6.4rem;
}
#message .inner .cnt p {
  font-size: 2rem;
  font-weight: var(--Medium);
  line-height: 4.5rem;
  margin-bottom: 4.5rem;
}
#message .inner .cnt p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  #message .inner .cnt .lead {
    font-size: 5.5vw;
    line-height: 16vw;
  }
  #message .inner .cnt p {
    font-size: 3vw;
    line-height: 8vw;
    margin-bottom: 8vw;
  }
}

/* ============================
service
---------------------------- */
#service {
  width: 100%;
  padding: 16.0rem 2.78vw 28.0rem 2.78vw;
  background-image:
    url(./img/bg_cloud1.png),
    url(./img/bg_cloud2.png),
    url(./img/bg_cloud3.png),
    url(./img/bg_service.jpg),
    url(./img/bg_nikkori.jpg);
  background-position:
    top 13.7rem left,
    top 143rem right,
    bottom center,
    top center,
    top 100rem center;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  position: relative;
  z-index: 0;
}
#service .inner {
  width: 100%;
  max-width: calc(144rem - 24rem);
  margin: 0 auto;
  overflow: visible;
}
#service .inner h2.ttl {
  margin-top: 11.0rem;
  margin-bottom: 17.0rem;
}
#service .inner .office-name {
  border-radius: 20px;
  width: 100%;
  max-width: 240px;
  height: 40px;
  flex-shrink: 0;
  color: #FFF;
  font-size: 2rem;
  font-weight: var(--Bold);
  line-height: 40px;
  text-align: center;
}
#service .inner .office-name.okage {
  background-color: var(--base-orange);
}
#service .inner .office-name.kesera {
  background-color: var(--base-pink);
}
#service .inner .cnt {
  width: 100%;
  margin-top: 4.0rem;
  overflow: visible;
}
#service .inner .cnt .cnt-left {
  width: calc(56 / (144 - 24) * 100%);
  position: relative;
}
#service .inner .cnt .cnt-right {
  width: calc(57.6 / (144 - 24) * 100%);
  position: relative;
  overflow: visible;
}
#service .inner .cnt .cnt-left .service-ttl {
  margin: 0 0 4.0rem 0;
}
#service .inner .cnt .cnt-left .service-dsc {
  font-size: 1.8rem;
  font-weight: var(--Medium);
  line-height: 3.4rem;
  margin-bottom: 4.0rem;
}
#service .inner .cnt .cnt-left .service-lst {
  gap: 1.6rem 2.5rem;
}
#service .inner .cnt .cnt-left .service-lst .service-lst-itm {
  width: 12vw;
  max-width: 16.8rem;
  aspect-ratio: 1 / 1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2rem;
  font-weight: var(--Bold);
  line-height: 3rem;
}
#service .inner .cnt.okage .cnt-left .service-lst .service-lst-itm {
  background-image: url(./img/bg_okage_circle.png);
}
#service .inner .cnt.kesera .cnt-left .service-lst .service-lst-itm {
  background-image: url(./img/bg_kesera_circle.png);
}
#service .inner .cnt .cnt-right .service-img {
  position: absolute;
}
#service .inner .cnt .cnt-right .service-img.layer0 {
  z-index: 3;
}
#service .inner .cnt .cnt-right .service-img.layer1 {
  width: 100%;
  max-width: 57.6rem;
  top: 0;
  left: 0;
  z-index: 2;
}
#service .inner .cnt .cnt-right .service-img.layer2 {
  width: 100%;
  max-width: 57.6rem;
  top: 17.7rem;
  left: 12.0rem;
  z-index: 1;
}
#service .inner .cnt.okage .cnt-right .service-img.layer0 {
  top: -17rem;
  right: -4.7rem;
  width: 100%;
  max-width: 25rem;
  aspect-ratio: 1 / 1;
}
#service .inner .cnt.kesera .cnt-right .service-img.layer0 {
  top: 78rem;
  left: -80rem;
  width: 100%;
  max-width: 27.732rem;
  aspect-ratio: 1 / 1;
}
#service .inner .service-bnr {
  width: 100%;
  margin-top: 7.2rem;
  margin-bottom: 23.2rem;
}
#service .inner .service-bnr:last-of-type {
  margin-bottom: 0;
}
#service .inner .service-bnr a {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 80.0rem;
  padding: 3.0rem 2.0rem;
  border-radius: 1.0rem;
  text-align: center;
}
#service .inner .service-bnr.okage a {
  background: var(--base-orange);
  transition: all 0.3s ease;
}
#service .inner .service-bnr.okage a:hover {
  background: var(--base-orange-hover);
}
#service .inner .service-bnr.kesera a {
  background: var(--base-pink);
  transition: all 0.3s ease;
}
#service .inner .service-bnr.kesera a:hover {
  background: var(--base-pink-hover);
}
#service .inner .service-bnr a .office-name {
  background-color: #FFFFFF;
  margin: 0 auto 2.2rem auto;
}
#service .inner .service-bnr.okage a .office-name {
  color: var(--base-orange);
  transition: all 0.3s ease;
}
#service .inner .service-bnr.okage a:hover .office-name {
  color: var(--base-orange-hover);
}
#service .inner .service-bnr.kesera a .office-name {
  color: var(--base-pink);
  transition: all 0.3s ease;
}
#service .inner .service-bnr.kesera a:hover .office-name {
  color: var(--base-pink-hover);
}
#service .inner .service-bnr a .service-ttl img {
  margin: 0 auto 2.4rem auto;
}
#service .inner .service-bnr a .service-adr {
  color: #FFF;
  text-align: center;
  font-size: 2rem;
  font-weight: var(--Bold);
  line-height: 3rem;
}
#service .inner .service-bnr a .service-tel {
  color: #FFF;
  text-align: center;
  font-family: var(--Roboto);
  font-size: 3rem;
  font-weight: var(--SemiBold);
  line-height: 3.5rem;
  margin-bottom: 1.0rem;
}
#service .inner .service-bnr a .service-tim {
  color: #FFF;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: var(--Medium);
  line-height: 2.4rem;
}

@media screen and (max-width: 1455px) {
}

@media screen and (max-width: 960px) {
  #service {
    background-position:
    top 13.7rem left,
    top 170rem right,
    bottom center,
    top center,
    top 127rem center;
  }
  #service .inner .cnt .cnt-left .service-lst .service-lst-itm {
    width: 26vw;
    max-width: 26vw;
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: 3.5vw;
    line-height: 5vw;
  }
  #service .inner .cnt .cnt-left,
  #service .inner .cnt .cnt-right {
    width: 100%;
  }
  #service .inner .cnt .cnt-right {
    margin-top: 4.0rem;
  }
  #service .inner .cnt .cnt-right .service-img {
    pointer-events: none;
  }
  #service .inner .cnt.okage .cnt-right .service-img.layer0 {
    top: -10rem;
    right: 0.3rem;
    max-width: 30vw;
  }
  #service .inner .cnt.kesera .cnt-right .service-img.layer0 {
    top: 33.0rem;
    left: -4.0rem;
    max-width: 30vw;
  }
  #service .inner .cnt .cnt-right .service-img.layer1 {
    position: relative;
    width: 75%;
    top: unset;
    left: unset;
    margin-bottom: 20vw;
  }
  #service .inner .cnt .cnt-right .service-img.layer2 {
    position: absolute;
    width: 75%;
    top: 20vw;
    right: 0;
    left: unset;
  }
  #service .inner .service-bnr {
    width: 100%;
    margin-top: 4.0rem;
    margin-bottom: 11.6rem;
  }
}

@media screen and (max-width: 555px) {
  #service .inner .service-bnr a .service-tim {
    font-size: 3vw;
  }
}

/* ============================
blog
---------------------------- */
#blog {
  width: 100%;
  padding: 0 2.78vw 14.4rem 2.78vw;
  position: relative;
  z-index: 0;
}
body.home #blog {
  background-color: #FFF6F5;
}
body.archive #blog {
  background-color: #FFFFFF;
}
#blog .inner {
  width: 100%;
  max-width: calc(144rem - 24rem);
  margin: 0 auto;
  overflow: visible;
}
#blog .inner h2.ttl {
  margin-bottom: 9.6rem;
}
#blog .inner .blog-lst {
  width: 100%;
  gap: 8.0rem 6.0rem;
}
body.home #blog .inner .blog-lst {
  margin-bottom: 8.0rem;
}
body.archive #blog .inner .blog-lst {
  margin-bottom: 12.8rem;
}
#blog .inner .blog-lst .blog-item {
  width: 36rem;
}
#blog .inner .blog-lst .blog-item a {
  display: block;
}
#blog .inner .blog-lst .blog-item a .blog-img {
  width: 100%;
  aspect-ratio: 360 / 320;
  margin-bottom: 2.4rem;
  overflow: hidden;
  border-radius: 1.0rem;
  background-color: #FFFFFF;
}
#blog .inner .blog-lst .blog-item a .blog-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}
#blog .inner .blog-lst .blog-item a:hover .blog-img img {
  transform: scale(1.05);
}
#blog .inner .blog-lst .blog-item a .blog-info {
  position: relative;
}
#blog .inner .blog-lst .blog-item a .blog-info .blog-dat {
  color: var(--body-col);
  margin-bottom: 1.6rem;
  font-family: var(--Roboto);
  font-size: 1.6rem;
  font-weight: var(--Medium);
  line-height: 2.1rem;
}
#blog .inner .blog-lst .blog-item a .blog-info .blog-ttl {
  color: var(--base-pink);
  margin-bottom: 1.6rem;
  font-size: 2rem;
  font-weight: var(--Bold);
  line-height: 3rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
#blog .inner .blog-lst .blog-item a:hover .blog-info .blog-ttl {
  color: var(--base-pink-hover);
}
#blog .inner .blog-lst .blog-item a .blog-info .blog-dsc {
  overflow: hidden;
  color: var(--body-col);
  font-size: 1.6rem;
  font-weight: var(--Regular);
  line-height: 2.4rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#blog .inner a.lst-btn {
  gap: 1.6rem;
}
#blog .inner a.lst-btn .txt {
  color: var(--body-col);
  font-size: 2rem;
  font-style: normal;
  font-weight: var(--Medium);
  line-height: normal;
}
#blog .inner a.lst-btn .ico {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  background-image: url(./img/arrow-right-circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}
#blog .inner a.lst-btn:hover .ico {
  transform: scale(1.1);
}

@media screen and (max-width: 1286px) {
  #blog .inner .blog-lst .blog-item {
    width: 100%;
  }
}

/* ============================
blog-post
---------------------------- */
#blog-post {
  width: 100%;
  padding: 17.6rem 2.78vw 14.4rem 2.78vw;
  position: relative;
  background-color: #FFFFFF;
  z-index: 0;
}
#blog-post .inner {
  width: 100%;
  max-width: 76.8rem;
  margin: 0 auto;
  overflow: visible;
}
#blog-post .inner .blog-header {
  margin-top: 7.2rem;
  margin-bottom: 4.8rem;
}
#blog-post .inner .blog-header .blog-dat {
  font-family: var(--Roboto);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.1rem;
  margin-bottom: 1.6rem;
}
#blog-post .inner .blog-header .blog-ttl {
  color: var(--base-pink);
  font-size: 4rem;
  font-weight: var(--Medium);
  line-height: 1.5;
}
#blog-post .inner .blog-body {}
#blog-post .inner .blog-body .blog-img {
  border-radius: 1.0rem;
  overflow: hidden;
}
#blog-post .inner .blog-body .blog-img.eye-catch {
  margin-bottom: 3.2rem;
}
#blog-post .inner .blog-body h1 {
  font-size: 3.2rem;
  font-weight: var(--Bold);
  line-height: 1.5;
  margin-bottom: 3.2rem;
}
#blog-post .inner .blog-body h2 {
  font-size: 2.8rem;
  font-weight: var(--Bold);
  line-height: 1.5;
  margin-bottom: 2.8rem;
}
#blog-post .inner .blog-body h3 {
  font-size: 2.4rem;
  font-weight: var(--Bold);
  line-height: 1.5;
  margin-bottom: 2.4rem;
}
#blog-post .inner .blog-body h4 {
  font-size: 2.0rem;
  font-weight: var(--Bold);
  line-height: 1.5;
  margin-bottom: 2.0rem;
}
#blog-post .inner .blog-body h5 {
  font-size: 1.8rem;
  font-weight: var(--Bold);
  line-height: 1.5;
  margin-bottom: 1.8rem;
}
#blog-post .inner .blog-body h6 {
  font-size: 1.6rem;
  font-weight: var(--Bold);
  line-height: 1.5;
  margin-bottom: 1.6rem;
}
#blog-post .inner .blog-body p {
  font-size: 1.6rem;
  font-weight: var(--Medium);
  line-height: 3.2rem;
  margin-bottom: 3.2rem;
}
#blog-post .inner .blog-body a {
  color: var(--base-pink);
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
}
#blog-post .inner .blog-body a:hover {
  color: var(--base-pink-hover);
}
#blog-post .inner .blog-body ul {
  font-size: 1.6rem;
  font-weight: var(--Medium);
  line-height: 3.2rem;
  margin-bottom: 3.2rem;
  padding-left: 2.0rem;
  list-style: disc;
  margin-bottom: 3.2rem;
}
#blog-post .inner .blog-body ol {
  font-size: 1.6rem;
  font-weight: var(--Medium);
  line-height: 3.2rem;
  margin-bottom: 3.2rem;
  padding-left: 2.0rem;
  list-style: decimal;
  margin-bottom: 3.2rem;
}
#blog-post .inner .blog-body img {
  display: inline-block;
  width: 100%;
}

@media screen and (max-width: 960px) {
  #blog-post {
    padding-top: 3.2rem;
  }
}

/* ============================
recruit
---------------------------- */
#recruit {
  width: 100%;
  height: 40rem;
  padding: 8.0rem 0 0 0;
  position: relative;
  background-image: url(./img/bg_recruit.png);
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}
#recruit .inner {
  width: 100%;
  max-width: calc(144rem - 24rem);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#recruit .inner::before,
#recruit .inner::after {
  content: "";
  position: absolute;
  width: 19.8rem;
  height: 24.8rem;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#recruit .inner::before {
  background-image: url(./img/bg_recruit_chara_l.png);
  bottom: 4.6rem;
  left: 0;
}
#recruit .inner::after {
  background-image: url(./img/bg_recruit_chara_r.png);
  bottom: 4.6rem;
  right: 0;
}
#recruit .inner h2.ttl {
  margin-bottom: 4.0rem;
}
#recruit .inner h3.sub-ttl {
  font-size: 3rem;
  font-weight: var(--Medium);
  margin-bottom: 1.6rem;
}
#recruit .inner p.txt {
  font-size: 1.6rem;
  font-weight: var(--Medium);
  line-height: 3.2rem;
}

@media screen and (max-width: 960px) {
  #recruit {
    width: 100%;
    height: auto;
    padding-bottom: 0;
    background-size: cover;
  }
  #recruit .inner {
    padding-bottom: 24.8rem;
  }
  #recruit .inner::before,
  #recruit .inner::after {
    bottom: 0;
  }
}

/* ============================
company
---------------------------- */
#company {
  width: 100%;
  padding: 11.4rem 0;
  position: relative;
  background-color: #FFFFFF;
  z-index: 0;
  overflow: hidden;
}
#company .inner {
  width: 100%;
  max-width: calc(144rem - 44rem);
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  position: relative;
}
#company .inner h2.ttl {
  position: relative;
  margin-bottom: 4.0rem;
  z-index: 1000;
}
#company .inner dl {
  margin-bottom: 4.0rem;
  border-top: 1px solid #DDD;
}
#company .inner dl:last-child {
  margin-bottom: 0;
}
#company .inner dl dt {
  width: 27%;
  padding: 1.6rem 2.0rem;
  border-bottom: 1px solid #DDD;
  box-sizing: border-box;
  display: flex;
  font-size: 1.6rem;
  font-weight: var(--SemiBold);
  line-height: 3.5rem;
}
#company .inner dl dd {
  width: calc(100% - 27%);
  padding: 1.6rem 2.0rem;
  box-sizing: border-box;
  border-bottom: 1px solid #DDD;
  display: flex;
  font-size: 1.6rem;
  font-weight: var(--Medium);
  line-height: 3.2rem;
}
#company .inner dl dd a {
  color: var(--body-col);
}
#company .inner .company-img.layer0 {
  position: absolute;
  width: 27.0rem;
  height: 35.3rem;
  top: 0;
  right: -15.0rem;
  z-index: 1;
}

@media screen and (max-width: 960px) {
  #company {
    padding: 16rem 0 0 0;
  }
  #company .inner {
    padding: 8.0rem 2.78vw 16.0rem 2.78vw;
  }
}

@media screen and (max-width: 767px) {
  #company {
    padding: 12rem 2.78vw 0 2.78vw;
  }
  #company .inner dl dt {
    display: block;
    width: 100%;
    padding: 1.0rem 2.0rem;
  }
  #company .inner dl dd {
    display: block;
    width: 100%;
    padding: 1.0rem 2.0rem;
  }
  #company .inner {
    padding: 8.0rem 2.78vw 12.0rem 2.78vw;
  }
  #company .inner dl dt {
    border-bottom: none;
  }
}