@charset "UTF-8";
/* CSS Document */
body {
  padding-top: 0;
}

.fv {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.fv > img {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
}
.fv .txts p {
  font-family: "aktiv-grotesk-extended", sans-serif;
  font-size: 100px;
  font-weight: 400;
  line-height: 0.9;
}
@media screen and (max-width: 1350px) {
  .fv .txts p {
    font-size: 7.4vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .txts p {
    font-size: 11vw;
  }
}
.fv .txts p span {
  font-style: italic;
  font-weight: 100 !important;
}
.fv .txts h1 {
  color: #fff;
  font-family: "shippori-mincho", serif;
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  margin-top: 15px;
  width: 100%;
}
@media screen and (max-width: 1350px) {
  .fv .txts h1 {
    font-size: 3.2vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .txts h1 {
    font-size: 4.4vw;
    margin-top: 1.333vw;
  }
}
.fv .imgs {
  aspect-ratio: 370/360;
  max-width: 370px;
  width: 100%;
}
@media screen and (max-width: 1350px) {
  .fv .imgs {
    max-width: 28.6vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .imgs {
    aspect-ratio: 417/380;
    max-width: 55.6vw;
  }
}
.fv .imgs .mv01 {
  -o-object-fit: cover;
  aspect-ratio: 200/240;
  display: block;
  max-width: 200px;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 1350px) {
  .fv .imgs .mv01 {
    max-width: 14.81vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .imgs .mv01 {
    aspect-ratio: 249/299;
    max-width: 33.2vw;
  }
}
.fv .imgs .mv02 {
  -o-object-fit: cover;
  aspect-ratio: 240/180;
  display: block;
  max-width: 240px;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 1350px) {
  .fv .imgs .mv02 {
    max-width: 17.78vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .imgs .mv02 {
    aspect-ratio: 225/224;
    max-width: 30vw;
  }
}
.fv .imgs p {
  color: #fff;
  font-family: "shippori-mincho", serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1;
  padding-left: 2em;
  text-indent: -2em;
}
@media screen and (max-width: 1350px) {
  .fv .imgs p {
    bottom: 1.85vw;
    font-size: 1.63vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .imgs p {
    font-size: 3.2vw;
  }
}
.fv::before,
.fv::after {
  display: none;
}

body.on .fv::before,
body.on .fv::after {
  display: block;
}

body:not(.on) .fv .mv-img.is-tb-pc {
  max-width: 800px;
  width: 100%;
}
body:not(.on) .fv .mv-img.is-sp {
  max-width: 400px;
  width: 100%;
}
body.on .fv {
  height: 100vh;
}
body.on .fv .mv-img {
  height: 100%;
  position: absolute;
  width: 100%;
}
body.on .fv .txts {
  -ms-filter: blur(6px);
  -webkit-animation-name: fvtxt;
  -webkit-animation-delay: 1.7s;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-delay: 1.7s;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: fvtxt;
  animation-timing-function: ease;
  bottom: 50px;
  filter: blur(6px);
  left: 170px;
  opacity: 0;
  position: absolute;
  transform: translateX(50px);
  z-index: 2;
}
@media screen and (max-width: 1350px) {
  body.on .fv .txts {
    left: 4.33vw;
  }
}
@media screen and (max-width: 768px) {
  body.on .fv .txts {
    bottom: 10vw;
    left: 40px;
  }
}
@media screen and (max-width: 576px) {
  body.on .fv .txts {
    bottom: 5.33vw;
    left: 20px;
  }
}
body.on .fv .imgs {
  -ms-filter: blur(6px);
  -webkit-animation-name: fvimg;
  -webkit-animation-delay: 1.7s;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-delay: 1.7s;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: fvimg;
  animation-timing-function: ease;
  filter: blur(6px);
  opacity: 0;
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(20px);
  z-index: 1;
}
@media screen and (max-width: 1350px) {
  body.on .fv .imgs {
    right: 5.93vw;
  }
}
@media screen and (max-width: 768px) {
  body.on .fv .imgs {
    right: 20px;
    top: 46%;
  }
}
@media screen and (max-width: 576px) {
  body.on .fv .imgs {
    right: 15px;
  }
}
body.on .fv .imgs .mv01 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
body.on .fv .imgs .mv02 {
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 2;
}
body.on .fv .imgs p {
  bottom: 25px;
  position: absolute;
  right: 0;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  body.on .fv .imgs p {
    bottom: -4vw;
  }
}
@-webkit-keyframes fvtxt {
  0% {
    -ms-filter: blur(6px);
    filter: blur(6px);
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fvtxt {
  0% {
    -ms-filter: blur(6px);
    filter: blur(6px);
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0px);
  }
}
@-webkit-keyframes fvimg {
  0% {
    -ms-filter: blur(6px);
    filter: blur(6px);
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    transform: translateY(-50%);
  }
}
@keyframes fvimg {
  0% {
    -ms-filter: blur(6px);
    filter: blur(6px);
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    transform: translateY(-50%);
  }
}
/*----------------------------------------------------------
sec01
------------------------------------------------------------*/
.sec01 {
  padding-bottom: 60px;
  padding-top: 60px;
}
@media screen and (max-width: 768px) {
  .sec01 {
    padding-bottom: 20px;
    padding-top: 20px;
  }
}
.sec01 .flex {
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.sec01 .box {
  margin-left: auto;
  padding-bottom: 90px;
  padding-left: 40px;
  padding-top: 90px;
  position: relative;
  width: 50%;
  z-index: 2;
}
@media screen and (max-width: 1280px) {
  .sec01 .box {
    padding-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .box {
    padding-bottom: 45px;
    padding-top: 45px;
    width: 100%;
  }
}
.sec01 .box .txt {
  font-size: 18px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec01 .box .txt {
    font-size: 11px;
    text-align: center;
  }
}
.sec01 .box .subtxt {
  font-family: "shippori-mincho", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin-top: 16px;
}
@media screen and (max-width: 1080px) {
  .sec01 .box .subtxt {
    font-size: 2.9vw;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .box .subtxt {
    font-size: 19px;
    margin-top: 10px;
    text-align: center;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .box .subtxt {
    font-size: 15px;
  }
}
.sec01 .btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 40px;
  width: 100%;
}
@media screen and (max-width: 1080px) {
  .sec01 .btn-wrap {
    gap: 20px;
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .btn-wrap {
    gap: 15px;
    margin-top: 22.5px;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .btn-wrap {
    gap: 10px;
  }
}
.sec01 .tel-btn {
  align-items: center;
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .sec01 .tel-btn {
    border: 1px solid #3b3b3b;
    gap: 9px;
    height: 50px;
    justify-content: center;
    margin-left: auto;
    margin-left: auto;
    margin-right: auto;
    margin-right: auto;
    max-width: 210px;
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .tel-btn {
    height: 45px;
  }
}
.sec01 .tel-btn img {
  display: block;
  flex-shrink: 0;
  width: 27px;
}
@media screen and (max-width: 1080px) {
  .sec01 .tel-btn img {
    width: 22px;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .tel-btn img {
    width: 16px;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .tel-btn img {
    width: 15px;
  }
}
.sec01 .tel-btn p {
  color: #fff;
  font-family: "aktiv-grotesk-condensed", sans-serif;
  font-size: 35px;
  font-weight: 100;
  line-height: 1;
}
@media screen and (max-width: 1080px) {
  .sec01 .tel-btn p {
    font-size: 27px;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .tel-btn p {
    font-size: 19px;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .tel-btn p {
    font-size: 16px;
  }
}
.sec01 .mail-btn {
  align-items: center;
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .sec01 .mail-btn {
    border: 1px solid #3b3b3b;
    gap: 9px;
    height: 50px;
    justify-content: center;
    margin-left: auto;
    margin-left: auto;
    margin-right: auto;
    margin-right: auto;
    max-width: 210px;
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .mail-btn {
    height: 45px;
  }
}
.sec01 .mail-btn img {
  display: block;
  flex-shrink: 0;
  width: 30px;
}
@media screen and (max-width: 1080px) {
  .sec01 .mail-btn img {
    width: 26px;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .mail-btn img {
    width: 17px;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .mail-btn img {
    width: 16px;
  }
}
.sec01 .mail-btn p {
  color: #fff;
  font-family: "aktiv-grotesk-condensed", sans-serif;
  font-size: 35px;
  font-weight: 100;
  line-height: 1;
}
@media screen and (max-width: 1080px) {
  .sec01 .mail-btn p {
    font-size: 27px;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .mail-btn p {
    font-size: 19px;
  }
}
@media screen and (max-width: 576px) {
  .sec01 .mail-btn p {
    font-size: 16px;
  }
}

/* ーーーーーーーーーーーー'sec01 管理画面側'ーーーーーーーーーーーーーー*/
body:not(.on) .sec01 .bg {
  width: 300px;
}

/* ーーーーーーーーーーーー'sec01 サイト表示側'ーーーーーーーーーーーーーー*/
body.on .sec01 .bg {
  -o-object-fit: cover;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

/*----------------------------------------------------------
sec02
------------------------------------------------------------*/
.sec02 {
  padding-bottom: 145px;
  padding-top: 135px;
  /* ーーーーーーーーーーーー'1個目のflex'ーーーーーーーーーーーーーー*/
  /* ーーーーーーーーーーーー'2個目のflex'ーーーーーーーーーーーーーー*/
}
@media screen and (max-width: 768px) {
  .sec02 {
    padding-bottom: 78px;
    padding-top: 78px;
  }
}
@media screen and (max-width: 576px) {
  .sec02 {
    padding-bottom: 50px;
    padding-top: 50px;
  }
}
.sec02 .c-ttl {
  position: relative;
  z-index: 1;
}
.sec02 .wrap {
  margin-left: auto;
  margin-right: auto;
  margin-top: 35px;
  max-width: 1350px;
  position: relative;
  width: 100%;
  z-index: 1;
}
.sec02 .flex {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  gap: 60px;
  max-width: 1240px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .sec02 .flex {
    gap: 38px;
  }
}
@media screen and (max-width: 576px) {
  .sec02 .flex {
    gap: 25px;
  }
}
.sec02 .flex01 {
  justify-content: flex-start;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .sec02 .flex01 {
    flex-direction: column;
    margin-left: auto;
  }
}
.sec02 .flex01 .imgs {
  width: calc(50% - 60px / 2);
}
@media screen and (max-width: 768px) {
  .sec02 .flex01 .imgs {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .sec02 .flex01 .imgs {
    width: 100%;
  }
}
.sec02 .flex01 .imgs .img01 {
  -o-object-fit: cover;
  aspect-ratio: 350/500;
  object-fit: cover;
  width: 54.68%;
}
@media screen and (max-width: 768px) {
  .sec02 .flex01 .imgs .img01 {
    width: 55.22%;
  }
}
.sec02 .flex01 .imgs .img02 {
  -o-object-fit: cover;
  aspect-ratio: 350/370;
  object-fit: cover;
  width: 54.68%;
}
@media screen and (max-width: 768px) {
  .sec02 .flex01 .imgs .img02 {
    width: 55.22%;
  }
}
.sec02 .flex01 .txts {
  padding-top: 60px;
}
@media screen and (max-width: 768px) {
  .sec02 .flex01 .txts {
    padding-top: 0;
  }
}
.sec02 .flex02 {
  justify-content: flex-end;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .sec02 .flex02 {
    flex-direction: column-reverse;
    margin-right: auto;
  }
}
.sec02 .flex02 .imgs {
  width: 51.612%;
}
@media screen and (max-width: 768px) {
  .sec02 .flex02 .imgs {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .sec02 .flex02 .imgs {
    width: 100%;
  }
}
.sec02 .flex02 .imgs .img01 {
  -o-object-fit: cover;
  aspect-ratio: 420/310;
  object-fit: cover;
  width: 54.68%;
}
@media screen and (max-width: 768px) {
  .sec02 .flex02 .imgs .img01 {
    width: 71.64%;
  }
}
.sec02 .flex02 .imgs .img02 {
  -o-object-fit: cover;
  aspect-ratio: 350/450;
  object-fit: cover;
  width: 54.68%;
}
@media screen and (max-width: 768px) {
  .sec02 .flex02 .imgs .img02 {
    width: 52.23%;
  }
}
.sec02 .flex02 .txts {
  padding-top: 160px;
}
@media screen and (max-width: 768px) {
  .sec02 .flex02 .txts {
    padding-top: 0;
  }
}
.sec02 .txts {
  width: 43.54%;
}
@media screen and (max-width: 768px) {
  .sec02 .txts {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .sec02 .txts {
    width: 100%;
  }
}
.sec02 .txts .en {
  font-family: "aktiv-grotesk-extended", sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 0.9;
}
@media screen and (max-width: 1080px) {
  .sec02 .txts .en {
    font-size: 38px;
  }
}
@media screen and (max-width: 768px) {
  .sec02 .txts .en {
    font-size: 30px;
  }
}
@media screen and (max-width: 576px) {
  .sec02 .txts .en {
    font-size: 25px;
  }
}
.sec02 .txts .en span {
  font-style: italic;
  font-weight: 100 !important;
}
.sec02 .txts .ttl {
  color: #fff;
  font-family: "shippori-mincho", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}
@media screen and (max-width: 1080px) {
  .sec02 .txts .ttl {
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .sec02 .txts .ttl {
    font-size: 12.5px;
  }
}
@media screen and (max-width: 576px) {
  .sec02 .txts .ttl {
    font-size: 11px;
  }
}
.sec02 .txts .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 2.5;
  margin-top: 50px;
}
@media screen and (max-width: 1080px) {
  .sec02 .txts .txt {
    font-size: 15px;
    margin-top: 45px;
  }
}
@media screen and (max-width: 768px) {
  .sec02 .txts .txt {
    font-size: 14px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 576px) {
  .sec02 .txts .txt {
    font-size: 12px;
  }
}
.sec02 .c-btn {
  margin-top: 35px;
}
@media screen and (max-width: 768px) {
  .sec02 .c-btn {
    margin-top: 22px;
  }
}

/* ーーーーーーーーーーーー'sec02 管理画面側'ーーーーーーーーーーーーーー*/
body:not(.on) .sec02 > .pc {
  display: inline-block;
  max-width: 600px;
  width: 100%;
}
body:not(.on) .sec02 > .sp {
  display: inline-block;
  max-width: 400px;
  width: 100%;
}

/* ーーーーーーーーーーーー'sec02 サイト表示側'ーーーーーーーーーーーーーー*/
body.on .sec02 {
  position: relative;
}
body.on .sec02 > .pc {
  -o-object-fit: cover;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
body.on .sec02 > .sp {
  -o-object-fit: cover;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
body.on .sec02 .flex01 .imgs {
  aspect-ratio: 640/600;
  position: relative;
}
body.on .sec02 .flex01 .imgs .img01 {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}
body.on .sec02 .flex01 .imgs .img02 {
  bottom: 0;
  position: absolute;
  right: 0;
  z-index: 2;
}
body.on .sec02 .flex02 {
  margin-top: -50px;
}
@media screen and (max-width: 1350px) {
  body.on .sec02 .flex02 {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  body.on .sec02 .flex02 {
    margin-top: 42px;
  }
}
body.on .sec02 .flex02 .imgs {
  aspect-ratio: 640/580;
  position: relative;
}
body.on .sec02 .flex02 .imgs .img01 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  body.on .sec02 .flex02 .imgs .img01 {
    left: 0;
    right: initial;
  }
}
body.on .sec02 .flex02 .imgs .img02 {
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  body.on .sec02 .flex02 .imgs .img02 {
    left: initial;
    right: 0;
  }
}

/*----------------------------------------------------------
sec03
------------------------------------------------------------*/
.sec03 .top {
  display: flex;
}
@media screen and (max-width: 768px) {
  .sec03 .top {
    flex-direction: column;
  }
}
.sec03 .top a {
  align-items: center;
  display: flex;
  height: 460px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .sec03 .top a {
    height: 240px;
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .sec03 .top a:hover {
    cursor: pointer;
  }
}
.sec03 .top a img {
  transition: all 0.3s ease;
}
.sec03 .bottom {
  align-items: center;
  display: flex;
  height: 450px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .sec03 .bottom {
    height: 240px;
  }
}
.sec03 .bottom img {
  transition: all 0.3s ease;
}
.sec03 .ttls {
  position: relative;
  z-index: 2;
}
.sec03 .ttls .en {
  font-family: "aktiv-grotesk-extended", sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
}
@media screen and (max-width: 1080px) {
  .sec03 .ttls .en {
    font-size: 38px;
  }
}
@media screen and (max-width: 768px) {
  .sec03 .ttls .en {
    font-size: 30px;
  }
}
@media screen and (max-width: 576px) {
  .sec03 .ttls .en {
    font-size: 25px;
  }
}
.sec03 .ttls .en span {
  font-style: italic;
  font-weight: 100 !important;
}
.sec03 .ttls .ttl {
  color: #fff;
  font-family: "shippori-mincho", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  text-align: center;
}
@media screen and (max-width: 1080px) {
  .sec03 .ttls .ttl {
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .sec03 .ttls .ttl {
    font-size: 12.5px;
  }
}
@media screen and (max-width: 576px) {
  .sec03 .ttls .ttl {
    font-size: 11px;
  }
}

/* ーーーーーーーーーーーー'sec03 管理画面側'ーーーーーーーーーーーーーー*/
body:not(.on) .sec03 .top img {
  display: inline-block;
  max-width: 500px;
  width: 100%;
}
body:not(.on) .sec03 .bottom img {
  max-width: 1000px;
  width: 100%;
}

/* ーーーーーーーーーーーー'sec03 サイト表示側'ーーーーーーーーーーーーーー*/
body.on .sec03 img {
  -o-object-fit: cover;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  body.on .sec03 a:hover img {
    transform: scale(1.1);
  }
}

/*----------------------------------------------------------
sec04 制作実績
------------------------------------------------------------*/
.sec04 {
  padding-bottom: 120px;
  padding-top: 130px;
}
@media screen and (max-width: 768px) {
  .sec04 {
    padding-bottom: 70px;
    padding-top: 75px;
  }
}
@media screen and (max-width: 576px) {
  .sec04 {
    padding-bottom: 50px;
    padding-top: 55px;
  }
}
.sec04 .webgene-blog {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  max-width: 1140px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .sec04 .webgene-blog {
    gap: 35px 15px;
    margin-top: 30px;
  }
}
.sec04 .webgene-item {
  width: calc((100% - 15px * 3) / 4);
}
@media screen and (max-width: 768px) {
  .sec04 .webgene-item {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    width: calc((100% - 15px * 1) / 2);
  }
}
@media screen and (max-width: 576px) {
  .sec04 .webgene-item {
    width: 100%;
  }
}
.sec04 .webgene-item a {
  display: block;
  transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
  .sec04 .webgene-item a:hover {
    color: #fff;
    cursor: pointer;
    opacity: 0.6;
  }
  .sec04 .webgene-item a .blogItemTitle {
    color: #fff;
  }
}
.sec04 .blogItemimg {
  aspect-ratio: 280/220;
  overflow: hidden;
}
.sec04 .blogItemimg img {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
}
.sec04 .blogItemBox__txts {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
}
@media screen and (max-width: 768px) {
  .sec04 .blogItemBox__txts {
    margin-top: 21px;
  }
}
.sec04 .blogItemBox__txts .date {
  color: #b7c6dd;
  font-family: "aktiv-grotesk-extended", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec04 .blogItemBox__txts .date {
    display: none;
  }
}
.sec04 .blogItemBox__txts .blogItemTitle {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #b7c6dd;
  display: -webkit-box;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.66;
  margin-top: 6px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec04 .blogItemBox__txts .blogItemTitle {
    font-size: 14px;
    margin-top: 0;
  }
}
.sec04 .blogItemBox__txts .txt {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.66;
  margin-top: 10px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec04 .blogItemBox__txts .txt {
    font-size: 12px;
  }
}
.sec04 .c-btn {
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .sec04 .c-btn {
    margin-top: 45px;
  }
}
@media screen and (max-width: 576px) {
  .sec04 .c-btn {
    margin-top: 40px;
  }
}

/* ーーーーーーーーーーーー'sec04 管理画面側'ーーーーーーーーーーーーーー*/
/* ーーーーーーーーーーーー'sec04 サイト表示側'ーーーーーーーーーーーーーー*/
/*----------------------------------------------------------
sec05
------------------------------------------------------------*/
.sec05 {
  overflow: hidden;
  padding-bottom: 90px;
  padding-top: 120px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec05 {
    padding-bottom: 120px;
    padding-top: 140px;
  }
}
@media screen and (max-width: 576px) {
  .sec05 {
    padding-bottom: 80px;
    padding-top: 100px;
  }
}
.sec05 .bg {
  -o-object-position: center bottom !important;
  object-position: center bottom !important;
}
.sec05 .wrap {
  position: relative;
  z-index: 2;
}
.sec05 .wrap .ttl {
  color: #b7c6dd;
  font-family: "aktiv-grotesk-extended", sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec05 .wrap .ttl {
    font-size: 30px;
  }
}
@media screen and (max-width: 576px) {
  .sec05 .wrap .ttl {
    font-size: 25px;
  }
}
.sec05 .wrap .txt {
  font-family: "shippori-mincho", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  margin-top: 20px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec05 .wrap .txt {
    font-size: 14px;
    margin-top: 10px;
  }
}
@media screen and (max-width: 576px) {
  .sec05 .wrap .txt {
    font-size: 12px;
  }
}
.sec05 .wrap .c-btn {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}
@media screen and (max-width: 768px) {
  .sec05 .wrap .c-btn {
    margin-top: 15px;
  }
}

/* ーーーーーーーーーーーー'sec05 管理画面側'ーーーーーーーーーーーーーー*/
body:not(.on) .sec05 .bg.is-tb-pc {
  max-width: 800px;
  width: 100%;
}
body:not(.on) .sec05 .bg.is-sp {
  max-width: 400px;
  width: 100%;
}

/* ーーーーーーーーーーーー'sec05 サイト表示側'ーーーーーーーーーーーーーー*/
body.on .sec05 .bg {
  -o-object-fit: cover;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
/*# sourceMappingURL=sourcemaps/index.css.map */