/* --------------- variables --------------------- */
/* Break Point */
/* Color */
article#homeTop .characters .char#char1 {
  aspect-ratio: 324/250;
}
article#homeTop .characters .char#char2 {
  aspect-ratio: 396/300;
}
article#homeTop .characters .char#char3 {
  aspect-ratio: 389/277;
}
article#homeTop .characters .char#char4 {
  aspect-ratio: 335/300;
}
article#homeTop .characters .char#char5 {
  aspect-ratio: 367/290;
}
article#homeTop .characters .char#char6 {
  aspect-ratio: 323/287;
}
article#homeTop .characters .char#char7 {
  aspect-ratio: 332/287;
}
article#homeTop .characters .char#char8 {
  aspect-ratio: 355/292;
}
article#homeTop .characters .char#char9 {
  aspect-ratio: 366/287;
}
article#homeTop .characters .char#char10 {
  aspect-ratio: 321/293;
}
article#homeTop .characters .char#char11 {
  aspect-ratio: 348/305;
}
article#homeTop .characters .char#char12 {
  aspect-ratio: 381/305;
}
article#homeTop .characters .char#char13 {
  aspect-ratio: 393/321;
}
article#homeTop .characters #topCatch .nahito img {
  aspect-ratio: 725/201;
}
@keyframes charPop {
  70% {
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

#shiru {
  width: 100%;
  background-color: #f0f0f0;
}
#shiru ul {
  list-style: none;
}
#shiru ul a {
  color: #000;
}
#shiru ul a span {
  display: block;
}

#recInfo {
  background-color: #fdecea;
}

.fadeIn {
  transform: translateY(200px);
  opacity: 0;
}

@media screen and (max-width: 768px) {
  article#homeTop {
    position: relative;
    padding-top: 230vw;
  }
  article#homeTop .characters {
    width: 100%;
    height: 220vw;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  article#homeTop .characters .char {
    position: absolute;
    transform: scale(0) translateY(0);
    animation: charPop 0.4s forwards;
  }
  article#homeTop .characters .char img {
    width: 100%;
    height: auto;
  }
  article#homeTop .characters .char#char1 {
    width: 22%;
    right: 22%;
    top: 85vw;
  }
  article#homeTop .characters .char#char2 {
    width: 27%;
    right: 38%;
    top: 127vw;
    animation-delay: 0.1s;
  }
  article#homeTop .characters .char#char3 {
    width: 26%;
    right: -1%;
    top: 110vw;
    animation-delay: 0.2s;
  }
  article#homeTop .characters .char#char4 {
    width: 23%;
    right: 67%;
    top: 155vw;
    animation-delay: 0.3s;
  }
  article#homeTop .characters .char#char5 {
    width: 26%;
    right: 76%;
    top: 195vw;
    animation-delay: 0.4s;
  }
  article#homeTop .characters .char#char6 {
    width: 23%;
    right: 4%;
    top: 195vw;
    animation-delay: 0.5s;
  }
  article#homeTop .characters .char#char7 {
    width: 22%;
    right: 61%;
    top: 89vw;
    animation-delay: 0.6s;
  }
  article#homeTop .characters .char#char8 {
    width: 24%;
    right: 68%;
    top: 2vw;
    animation-delay: 0.7s;
  }
  article#homeTop .characters .char#char9 {
    width: 25%;
    right: 36%;
    top: 176vw;
    animation-delay: 0.8s;
  }
  article#homeTop .characters .char#char10 {
    width: 22%;
    right: 76%;
    top: 116vw;
    animation-delay: 0.9s;
  }
  article#homeTop .characters .char#char11 {
    width: 24%;
    right: 32%;
    top: 16vw;
    animation-delay: 0.1s;
  }
  article#homeTop .characters .char#char12 {
    width: 26%;
    right: 6%;
    top: 152vw;
    animation-delay: 0.11s;
  }
  article#homeTop .characters .char#char13 {
    width: 27%;
    right: 1%;
    top: 0vw;
    animation-delay: 0.12s;
  }
  article#homeTop #topCatch {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  article#homeTop #topCatch #nahito {
    width: 85vw;
    position: absolute;
    top: 48vw;
    left: 8%;
    aspect-ratio: 725/244;
  }
  article#homeTop #topCatch #nahito img {
    width: 100%;
  }
  article#homeTop .read {
    position: relative;
    width: 100%;
  }
  article#homeTop .read:before {
    content: "";
    display: block;
    background-image: url(../images/home/SP_back_01.svg);
    aspect-ratio: 521/438;
    width: 70vw;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
  }
  article#homeTop .read .readInner {
    width: 90vw;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    padding-bottom: 38vw;
  }
  article#homeTop .read .readInner p {
    font-size: 3.7vw;
    line-height: 2.6;
    letter-spacing: 0.03em;
  }
  #shiru {
    padding: 100px 0;
  }
  #shiru .inner {
    width: 90%;
    margin: 0 auto;
  }
  #shiru .inner .shiruHead .img {
    text-align: center;
  }
  #shiru .inner .shiruHead .img img {
    max-width: 290px;
    width: 60%;
    height: auto;
  }
  #shiru .inner .shiruHead .txt {
    margin-top: 40px;
  }
  #shiru .inner .shiruHead .txt h2 {
    width: 220px;
  }
  #shiru .inner .shiruHead .txt p {
    font-size: 15px;
    margin-top: 33px;
  }
  #shiru .inner .btns li {
    margin-top: 40px;
  }
  #shiru .inner .btns li a {
    display: block;
    position: relative;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
  }
  #shiru .inner .btns li a .eng {
    font-size: 1.2em;
  }
  #shiru .inner .btns li a .img {
    z-index: 0;
    position: relative;
    width: 100%;
  }
  #shiru .inner .btns li a .img img {
    width: 100%;
    height: auto;
  }
  #shiru .inner .btns li a .txt {
    background-color: #fff;
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 85%;
    height: 102px;
    display: flex;
    align-items: center;
    padding: 0 25px;
  }
  #shiru .inner .btns li a .txt:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 20%;
    right: -16%;
    aspect-ratio: 144/56;
    width: 144px;
    background-repeat: no-repeat;
  }
  #shiru .inner .btns li a .txt .title {
    font-size: 23px;
    font-weight: 700;
    line-height: 32px;
  }
  #shiru .inner .btns li a .txt .read {
    font-size: 11px;
    font-weight: 700;
  }
  #shiru .inner .btns li:nth-of-type(1) a .txt:after {
    background-image: url(../images/home/02_itoki/itoki_important_text.svg);
  }
	/*
  #shiru .inner .btns li:nth-of-type(2) a .txt:after {
    background-image: url(../images/home/02_itoki/itoki_message_text.svg);
  }
	*/
  #shiru .inner .btns li:nth-of-type(2) a .txt:after {
    background-image: url(../images/home/02_itoki/itoki_introduction_text.svg);
  }
  .shiruBtn {
    display: flex;
    align-items: center;
    width: 300px;
    height: 60px;
    color: #000;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 60px;
    padding: 4px;
    margin: 0 auto;
    background-color: #fff;
  }
  .shiruBtn .t {
    font-size: 15px;
    flex: 1;
    text-align: center;
  }
  .shiruBtn .i {
    border-radius: 50%;
    background-color: #e63d30;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
  }
  .shiruBtn .i svg {
    aspect-ratio: 18/14;
    width: 20px;
    fill: #fff;
  }
  #shigoto {
    position: relative;
    z-index: 1;
    padding-top: 125px;
    background-image: url(../images/home/SP_back_02.svg);
    aspect-ratio: 498/788;
    background-repeat: no-repeat;
    background-position: 0 90%;
    background-size: 65% auto;
  }
  #shigoto .inner {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  #shigoto .inner:before {
    content: "";
    display: block;
    background-image: url(../images/home/03_shigoto/shigoto_illust.png);
    aspect-ratio: 731/660;
    background-size: 100% auto;
    width: min(202px, 50vw);
    position: absolute;
    right: 0;
    top: -170px;
    z-index: -1;
  }
  #shigoto .inner .txt {
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: flex-end;
  }
  #shigoto .inner .txt h2 {
    width: 220px;
  }
  #shigoto .inner .txt p {
    font-size: 15px;
    line-height: 25px;
    margin-top: 40px;
  }
  #shigoto .inner .img {
    margin-top: 50px;
    text-align: center;
  }
  #shigoto .inner .img img {
    max-width: 500px;
    width: 100%;
    height: auto;
  }
  #shigoto .inner .btn {
    margin-top: 40px;
  }
  #hito {
    margin-top: 100px;
  }
  #hito .inner {
    width: 90%;
    margin: 0 auto;
  }
  #hito .inner .txt h2 {
    width: 270px;
  }
  #hito .inner .txt p {
    font-size: 15px;
    line-height: 25px;
    margin-top: 40px;
  }
  #hito .inner .txt .mokuji {
    list-style: none;
    border-bottom: 1px solid #cbcbcb;
    margin-top: 35px;
  }
  #hito .inner .txt .mokuji li {
    border-top: 1px solid #cbcbcb;
  }
  #hito .inner .txt .mokuji li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    padding: 18px 15px;
  }
  #hito .inner .txt .mokuji li a .num {
    font-size: 25px;
    color: #808080;
    font-weight: 300;
  }
  #hito .inner .txt .mokuji li a .t {
    margin: 0 auto 0 25px;
  }
  #hito .inner .txt .mokuji li a .t span {
    display: block;
  }
  #hito .inner .txt .mokuji li a .t span.catch {
    font-size: 12px;
  }
  #hito .inner .txt .mokuji li a .t span.title {
    font-size: 20px;
  }
  #hito .inner .txt .mokuji li a .i {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e63d30;
  }
  #hito .inner .txt .mokuji li a .i svg {
    aspect-ratio: 25/18;
    width: 16px;
    fill: #fff;
  }
  #hito .inner .img {
    text-align: center;
    margin-top: 27px;
  }
  #hito .inner .img img {
    max-width: 560px;
    width: 80%;
    height: auto;
  }
  #kankyo {
    margin-top: 75px;
    position: relative;
  }
  #kankyo .wrap {
    width: 100%;
    background-color: #f0f0f0;
    padding: 50px 0 66vw;
  }
  #kankyo .wrap .inner {
    width: 90%;
    margin: 0 auto;
  }
  #kankyo .wrap .inner .txt h2 {
    width: 270px;
  }
  #kankyo .wrap .inner .txt p {
    font-size: 15px;
    line-height: 25px;
    margin-top: 40px;
  }
  #kankyo .img {
    width: 90vw;
    aspect-ratio: 670/545;
    margin-top: -50vw;
    position: relative;
  }
  #kankyo .img:after {
    content: "";
    display: block;
    background-image: url(../images/home/05_kankyo/kankyo_illust.png);
    background-size: 100% auto;
    aspect-ratio: 773/520;
    width: 200px;
    position: absolute;
    bottom: -90px;
    right: -3vw;
  }
  #kankyo .img img {
    -o-object-fit: cover;
       object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
  }
  #kankyo .btn.forSP {
    margin-top: 120px;
  }
  #recInfo {
    padding: 75px 0 75px;
    position: relative;
    margin-top: 100px;
  }
  #recInfo:before {
    content: "";
    display: block;
    background-image: url(../images/home/SP_back_03.svg);
    background-repeat: no-repeat;
    aspect-ratio: 23/30;
    width: 39%;
    position: absolute;
    right: 0%;
    top: -80px;
  }
  #recInfo .inner {
    width: 90%;
    margin: 0 auto;
  }
  #recInfo .inner h2 {
    width: 270px;
  }
  #recInfo .inner p {
    font-size: 15px;
    line-height: 25px;
    margin-top: 30px;
  }
  #recInfo .inner .btns {
    list-style: none;
    margin: 40px auto 0;
    width: 90%;
  }
  #recInfo .inner .btns li + li {
    margin-top: 28px;
  }
  #recInfo .inner .btns li a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
    color: #000;
    padding: 30px 19px;
    text-align: left;
  }
  #recInfo .inner .btns li a .txt {
    margin-left: 15px;
  }
  #recInfo .inner .btns li a .txt span {
    background-color: #e63d30;
    color: #fff;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 5px;
    height: 35px;
    margin-top: 5px;
    padding: 0 15px;
  }
  #recInfo .inner .btns li a svg {
    width: 60px;
    height: 60px;
    fill: #9db0c4;
  }
}
@media print, screen and (min-width: 769px) {
  article#homeTop {
    position: relative;
    padding-top: 100vh;
  }
  article#homeTop .characters {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  article#homeTop .characters .char {
    position: absolute;
    transform: scale(0) translateY(0);
    animation: charPop 0.4s forwards;
  }
  article#homeTop .characters .char img {
    width: 100%;
    height: auto;
  }
  article#homeTop .characters .char#char1 {
    width: 8.5%;
    right: 29%;
    top: min(35px, 2vw);
  }
  article#homeTop .characters .char#char2 {
    width: 10.5%;
    right: 32%;
    top: min(417px, 19vw);
    animation-delay: 0.1s;
  }
  article#homeTop .characters .char#char3 {
    width: 10%;
    right: 14%;
    top: min(540px, 24vw);
    animation-delay: 0.2s;
  }
  article#homeTop .characters .char#char4 {
    width: 8.5%;
    right: 2%;
    top: min(750px, 33vw);
    animation-delay: 0.3s;
  }
  article#homeTop .characters .char#char5 {
    width: 9.5%;
    right: 28%;
    top: min(1121px, 53vw);
    animation-delay: 0.4s;
  }
  article#homeTop .characters .char#char6 {
    width: 8.5%;
    right: 4%;
    top: min(1050px, 45vw);
    animation-delay: 0.5s;
  }
  article#homeTop .characters .char#char7 {
    width: 8.5%;
    right: 44%;
    top: min(115px, 5vw);
    animation-delay: 0.6s;
  }
  article#homeTop .characters .char#char8 {
    width: 9%;
    right: 4%;
    top: min(62px, 3vw);
    animation-delay: 0.7s;
  }
  article#homeTop .characters .char#char9 {
    width: 9.5%;
    right: 13%;
    top: min(1267px, 54vw);
    animation-delay: 0.8s;
  }
  article#homeTop .characters .char#char10 {
    width: 8.5%;
    right: 33%;
    top: min(751px, 32vw);
    animation-delay: 0.9s;
  }
  article#homeTop .characters .char#char11 {
    width: 9%;
    right: 17%;
    top: min(231px, 10vw);
    animation-delay: 0.1s;
  }
  article#homeTop .characters .char#char12 {
    width: 10%;
    right: 17%;
    top: min(880px, 38vw);
    animation-delay: 0.11s;
  }
  article#homeTop .characters .char#char13 {
    width: 10%;
    right: 0%;
    top: min(356px, 16vw);
    animation-delay: 0.12s;
  }
  article#homeTop #topCatch {
    width: min(1920px, 95vw);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  article#homeTop #topCatch #nahito {
    width: 38%;
    position: absolute;
    top: min(390px, 17vw);
    left: 10%;
    aspect-ratio: 725/244;
  }
  article#homeTop #topCatch #nahito img {
    width: 100%;
  }
  article#homeTop .read {
    position: relative;
    width: 100%;
    padding-bottom: 220px;
  }
  article#homeTop .read:before {
    content: "";
    display: block;
    background-image: url(../images/home/PC_back_left_01.svg);
    aspect-ratio: 308/329;
    width: 16vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  article#homeTop .read:after {
    display: block;
    content: "";
    background-image: url(../images/home/PC_back_right_01.svg);
    aspect-ratio: 659/1150;
    width: 34%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  article#homeTop .read .readInner {
    max-width: 1000px;
    width: 95vw;
    margin: 0 auto;
    position: relative;
    z-index: 5;
  }
  article#homeTop .read .readInner p {
    font-size: 22px;
    line-height: 60px;
  }
  #shiru {
    padding: 170px 0 200px;
    overflow: hidden;
  }
  #shiru .inner {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
  }
  #shiru .inner .shiruHead {
    display: flex;
    gap: 40px;
  }
  #shiru .inner .shiruHead .img {
    order: 2;
    width: 290px;
  }
  #shiru .inner .shiruHead .img img {
    width: 100%;
    height: auto;
  }
  #shiru .inner .shiruHead .txt {
    order: 1;
    flex: 1;
    padding-top: 30px;
  }
  #shiru .inner .shiruHead .txt h2 {
    width: 375px;
  }
  #shiru .inner .shiruHead .txt p {
    font-size: 18px;
    margin-top: 35px;
  }
  #shiru .inner .btns {
    display: flex;
    gap: 36px;
    margin-top: 75px;
	width: 66%;
  }
  #shiru .inner .btns li {
    flex: 1;
  }
  #shiru .inner .btns li a {
    display: block;
    position: relative;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    border-radius: 3px;
    overflow: hidden;
  }
  #shiru .inner .btns li a .img {
    z-index: 0;
    position: relative;
    width: 100%;
  }
  #shiru .inner .btns li a .img:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% auto;
    transition: all 0.4s ease;
    opacity: 0;
  }
  #shiru .inner .btns li a .img img {
    width: 100%;
    height: auto;
  }
  #shiru .inner .btns li a .txt {
    background-color: #fff;
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 85%;
    height: 102px;
    display: flex;
    align-items: center;
    padding: 0 25px;
  }
  #shiru .inner .btns li a .txt:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 20%;
    right: -17%;
    aspect-ratio: 144/56;
    width: 144px;
    background-repeat: no-repeat;
  }
  #shiru .inner .btns li a .txt .title {
    font-size: 23px;
    font-weight: 700;
    line-height: 32px;
  }
  #shiru .inner .btns li a .txt .read {
    font-size: 11px;
    font-weight: 700;
  }
  #shiru .inner .btns li a:hover {
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
  }
  #shiru .inner .btns li a:hover .img:before {
    opacity: 1;
  }
  #shiru .inner .btns li:nth-of-type(1) a .img:before {
    background-image: url(../images/home/02_itoki/itoki_important_button_mo.png);
  }
  #shiru .inner .btns li:nth-of-type(1) a .txt:after {
    background-image: url(../images/home/02_itoki/itoki_important_text.svg);
  }
  #shiru .inner .btns li:nth-of-type(2) a .img:before {
    background-image: url(../images/home/02_itoki/itoki_introduction_button_mo.png);
  }
  #shiru .inner .btns li:nth-of-type(2) a .txt:after {
    background-image: url(../images/home/02_itoki/itoki_introduction_text.svg);
  }
	
	
  .shiruBtn {
    display: flex;
    align-items: center;
    width: 257px;
    height: 50px;
    color: #000;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 60px;
    padding: 4px;
    transition: all 0.4s;
    background-color: #fff;
  }
  .shiruBtn .t {
    font-size: 13px;
    flex: 1;
    text-align: center;
    transition: all 0.4s;
  }
  .shiruBtn .i {
    border-radius: 50%;
    background-color: #e63d30;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    transition: all 0.4s;
  }
  .shiruBtn .i svg {
    width: 18px;
    height: 14px;
    fill: #fff;
    transition: all 0.4s;
  }
  .shiruBtn:hover {
    background-color: #e63d30;
  }
  .shiruBtn:hover .t {
    color: #fff;
  }
  .shiruBtn:hover .i {
    background-color: #fff;
  }
  .shiruBtn:hover .i svg {
    fill: #e63d30;
  }
  .secondArt {
    padding: 200px 0 240px;
    overflow: hidden;
    position: relative;
    background-image: url(../images/home/PC_back_left_02.svg);
    background-size: 48% auto;
    background-repeat: no-repeat;
  }
  .secondArt:before {
    content: "";
    display: block;
    background-image: url(../images/home/PC_back_right_02.svg);
    aspect-ratio: 728/627;
    background-size: 100% auto;
    position: absolute;
    right: 0;
    top: 22%;
    width: 37vw;
  }
  .secondArt:after {
    content: "";
    display: block;
    background-image: url(../images/home/PC_back_right_03.svg);
    aspect-ratio: 478/500;
    width: 25vw;
    background-size: 100% auto;
    position: absolute;
    right: 0;
    bottom: 29%;
  }
  #shigoto .inner {
    max-width: 1150px;
    width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto auto;
    gap: 40px 55px;
    position: relative;
  }
  #shigoto .inner:before {
    content: "";
    display: block;
    background-image: url(../images/home/03_shigoto/shigoto_illust.png);
    aspect-ratio: 731/660;
    background-size: 100% auto;
    width: min(366px, 25vw);
    position: absolute;
    right: 0;
    top: max(-150px, -20vw);
    z-index: -1;
  }
  #shigoto .inner .txt {
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: flex-end;
  }
  #shigoto .inner .txt h2 {
    width: 375px;
  }
  #shigoto .inner .txt p {
    font-size: 18px;
    line-height: 30px;
    margin-top: 40px;
  }
  #shigoto .inner .img {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  #shigoto .inner .img img {
    width: 122%;
    margin-left: -23.2%;
  }
  #shigoto .inner .btn {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  #hito {
    margin-top: 150px;
  }
  #hito .inner {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 40px;
  }
  #hito .inner .txt {
    width: min(550px, 50%);
  }
  #hito .inner .txt h2 {
    width: 375px;
  }
  #hito .inner .txt p {
    font-size: 18px;
    line-height: 30px;
    margin-top: 40px;
  }
  #hito .inner .txt .mokuji {
    list-style: none;
    border-bottom: 1px solid #cbcbcb;
    margin-top: 35px;
  }
  #hito .inner .txt .mokuji li {
    border-top: 1px solid #cbcbcb;
  }
  #hito .inner .txt .mokuji li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    padding: 20px 10px;
    transition: all 0.4s ease;
  }
  #hito .inner .txt .mokuji li a:hover {
    background-color: #e6ebf0;
  }
  #hito .inner .txt .mokuji li a .num {
    font-size: 50px;
    color: #808080;
    font-weight: 300;
  }
  #hito .inner .txt .mokuji li a .t {
    margin: 0 auto 0 30px;
  }
  #hito .inner .txt .mokuji li a .t span {
    display: block;
  }
  #hito .inner .txt .mokuji li a .t span.catch {
    font-size: 20px;
  }
  #hito .inner .txt .mokuji li a .t span.title {
    font-size: 30px;
  }
  #hito .inner .txt .mokuji li a .i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e63d30;
  }
  #hito .inner .txt .mokuji li a .i svg {
    width: 25px;
    height: 18px;
    fill: #fff;
  }
  #hito .inner .img {
    flex: 1;
  }
  #hito .inner .img img {
    width: 100%;
    height: auto;
  }
  #kankyo {
    margin-top: 260px;
    position: relative;
  }
  #kankyo:after {
    content: "";
    display: block;
    background-image: url(../images/home/05_kankyo/kankyo_illust.png);
    background-size: 100% auto;
    aspect-ratio: 773/520;
    width: 20%;
    position: absolute;
    bottom: -90px;
    left: 29%;
  }
  #kankyo .wrap {
    width: 100%;
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 15.6%, rgb(240, 240, 240) 15.6%, rgb(240, 240, 240) 100%);
    padding: 96px 0;
  }
  #kankyo .wrap .inner {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
  }
  #kankyo .wrap .inner .txt {
    width: 45%;
    margin: 0 0 0 auto;
  }
  #kankyo .wrap .inner .txt h2 {
    width: 375px;
  }
  #kankyo .wrap .inner .txt p {
    font-size: 18px;
    line-height: 30px;
    margin-top: 40px;
  }
  #kankyo .wrap .inner .txt .btn {
    margin-top: 35px;
  }
  #kankyo .img {
    position: absolute;
    width: 45vw;
    height: 550px;
    left: 0;
    top: -130px;
    overflow: hidden;
  }
  #kankyo .img img {
    -o-object-fit: cover;
       object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    aspect-ratio: 1720/1098;
  }
  #recInfo {
    padding: 200px 0 225px;
    position: relative;
    text-align: left;
    text-justify: unset;
  }
  #recInfo:before {
    content: "";
    display: block;
    background-image: url(../images/home/PC_back_right_04.svg);
    background-repeat: no-repeat;
    aspect-ratio: 567/471;
    width: 29%;
    position: absolute;
    right: 8%;
    top: -200px;
  }
  #recInfo .inner {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
  }
  #recInfo .inner h2 {
    width: 375px;
  }
  #recInfo .inner p {
    font-size: 18px;
    line-height: 30px;
    margin-top: 40px;
  }
  #recInfo .inner .btns {
    display: flex;
    justify-content: center;
    list-style: none;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 70px;
  }
  #recInfo .inner .btns li {
    width: calc((100% - 40px) / 3);
  }
  #recInfo .inner .btns li a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
    color: #000;
    padding: 30px 20px;
    transition: all 0.4s ease;
  }
  #recInfo .inner .btns li a .txt {
    margin-left: 18px;
  }
  #recInfo .inner .btns li a .txt span {
    background-color: #e63d30;
    color: #fff;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 5px;
    height: 35px;
    transition: all 0.4s ease;
  }
  #recInfo .inner .btns li a svg {
    width: 64px;
    height: 64px;
    fill: #9db0c4;
    transition: all 0.4s ease;
  }
  #recInfo .inner .btns li a:hover {
    background-color: #e63d30;
    color: #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    transform: translate(-3px, -3px);
  }
  #recInfo .inner .btns li a:hover .txt span {
    background-color: #fff;
    color: #e63d30;
  }
  #recInfo .inner .btns li a:hover svg {
    fill: #fff;
  }
  .footerTop {
    width: 100%;
    height: 160px;
    background-image: url(../images/home/PC_back_left_03.svg);
    background-repeat: no-repeat;
    background-size: 418px auto;
    background-position: 0 bottom;
  }
}
/*# sourceMappingURL=map/home.css.map */