@charset "UTF-8";
#selecter .map .HTMLBlock {
  height: 100%;
}

/* ----------------------------------------------
mainimg
------------------------------------------------- */
#mainimg {
  position: relative;
  margin: 24px min(1.5625%, 25px) 27px;
}
#mainimg #mainslider img, #mainimg #mainslider video {
  display: block;
  width: 100%;
  height: calc(100vh - 51px);
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
  border-radius: 10px;
}
#mainimg #mainslider:not(:has(.slick-list)) img:not(:first-child) {
  display: none;
}
#mainimg #mainslider:has(video) {
  position: relative;
}
#mainimg #mainslider:has(video)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/dotimage.png) repeat rgba(0, 0, 0, 0.5);
}
#mainimg #mainslider:has(video) img {
  display: none;
}
#mainimg .contents {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: var(--hsize, 147px) 10px 36px 3.0322580645%;
}
#mainimg .shape {
  margin: 0 0 -5px -9px;
  width: max(min(26.2558606832%, 392px), 100px);
}
#mainimg .title {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 48px;
  line-height: 1.6;
  color: #0099c2;
  margin-bottom: 19px;
}
#mainimg .catch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
#mainimg .catch .left {
  margin-bottom: 17px;
}
#mainimg .catch .left span {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 62px;
  line-height: 1.2;
  color: #0099c2;
  mix-blend-mode: color-burn;
}
#mainimg .catch .left small {
  display: block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #0099c2;
  margin-top: 19px;
  mix-blend-mode: multiply;
}
#mainimg .catch .right {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 25px;
  line-height: 1.64;
  color: #000;
  background: linear-gradient(90deg, #f3feec 0%, #d9f8f5 50.1759%, #c4f3fc 100%);
  align-content: center;
  text-align: center;
  padding: 10px 46px 16px 52px;
  border-radius: 15px;
}
@media (max-width: 999px) {
  #mainimg {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #mainimg #mainslider img, #mainimg #mainslider video {
    height: auto;
  }
  #mainimg .title {
    font-size: 36px;
    margin-bottom: 10px;
  }
  #mainimg .catch .left {
    margin-bottom: 5px;
  }
  #mainimg .catch .left span {
    font-size: 40px;
  }
  #mainimg .catch .left small {
    font-size: 16px;
    margin-top: 10px;
  }
  #mainimg .catch .right {
    font-size: 20px;
    padding: 10px 30px;
  }
}
@media (max-width: 767px) {
  #mainimg .contents {
    padding-bottom: 20px;
  }
  #mainimg .shape {
    margin: 0;
  }
  #mainimg .title {
    font-size: 26px;
    margin-bottom: 5px;
  }
  #mainimg .catch .left span {
    font-size: 28px;
  }
  #mainimg .catch .left small {
    font-size: 14px;
  }
  #mainimg .catch .right {
    font-size: 18px;
    padding: 10px 15px;
  }
}
@media (max-width: 500px) {
  #mainimg .title {
    font-size: 16px;
  }
  #mainimg .catch .left span {
    font-size: 18px;
  }
  #mainimg .catch .left small {
    font-size: 10px;
  }
  #mainimg .catch .right {
    font-size: 14px;
    padding: 10px;
  }
}

/* ----------------------------------------------
about
------------------------------------------------- */
#about {
  background: url(../images/about-bg.jpg) no-repeat center/cover;
  text-align: center;
  padding: 170px 10px 64px;
  margin-bottom: 56px;
}
#about .logo {
  margin-bottom: 52px;
}
#about .logo a {
  transition: all 0.5s ease-out;
}
#about .logo a:hover {
  opacity: 0.6;
}
#about .contents {
  width: min(100%, 1170px);
  margin: 0 auto 53px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 41px 10px 62px;
}
#about .contents .catch {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 48px;
  line-height: 1.3541666667;
  color: #29a6dd;
  margin-bottom: 31px;
}
#about .contents .text {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #00547b;
}
#about .btn a {
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#about .btn a:hover {
  opacity: 0.6;
}
#about .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: 0.5em;
  color: #fff;
  width: 238px;
  max-width: 100%;
  background: #29a6dd;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#about .btn a::after {
  content: "";
  width: 36px;
  aspect-ratio: 36/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/arow.png);
}
#about .btn a {
  height: 49px;
  font-size: 12.71px;
  border-radius: 25px;
}
@media (max-width: 999px) {
  #about .btn a {
    -moz-column-gap: 10px;
         column-gap: 10px;
    width: 220px;
    height: 45px;
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #about .btn a {
    width: 200px;
    height: 40px;
    font-size: 10px;
  }
}
#about .btn a {
  margin: 0 auto;
}
@media (max-width: 999px) {
  #about {
    padding: 150px 10px 40px;
    margin-bottom: 40px;
  }
  #about .logo {
    margin-bottom: 40px;
  }
  #about .contents {
    padding: 30px 10px 40px;
    margin-bottom: 40px;
  }
  #about .contents .catch {
    font-size: 38px;
    margin-bottom: 20px;
  }
  #about .contents .text {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  #about {
    padding: 100px 10px 30px;
    margin-bottom: 30px;
  }
  #about .logo {
    margin-bottom: 30px;
  }
  #about .contents {
    padding: 20px 10px;
    margin-bottom: 30px;
  }
  #about .contents .catch {
    font-size: 28px;
    margin-bottom: 10px;
  }
  #about .contents .catch br {
    display: none;
  }
  #about .contents .text {
    font-size: 14px;
  }
  #about .contents .text br {
    display: none;
  }
}

/* ----------------------------------------------
information column
------------------------------------------------- */
#information, #column {
  position: relative;
  margin-bottom: -141px;
}
#information .inner, #column .inner {
  width: min(100% - 20px, 1300px);
  display: flex;
  -moz-column-gap: 8.7692307692%;
       column-gap: 8.7692307692%;
  margin: 0 auto;
  background: linear-gradient(90deg, #f3feec 0%, #d9f8f5 50.1759%, #c4f3fc 100%);
  padding-bottom: 80px;
  border-radius: 30px;
}
#information .inner .head, #column .inner .head {
  padding: 55px 0 0 10.7692307692%;
}
#information .inner .head h2, #column .inner .head h2 {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 56px;
  line-height: 1;
  color: #0099c2;
}
#information .inner .head h2 small, #column .inner .head h2 small {
  display: block;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #000;
}
@media (max-width: 999px) {
  #information .inner .head h2, #column .inner .head h2 {
    font-size: 40px;
  }
  #information .inner .head h2 small, #column .inner .head h2 small {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  #information .inner .head h2, #column .inner .head h2 {
    font-size: 30px;
  }
  #information .inner .head h2 small, #column .inner .head h2 small {
    font-size: 16px;
  }
}
#information .inner .head h2, #column .inner .head h2 {
  margin-bottom: 35px;
}
#information .inner .head h2 small, #column .inner .head h2 small {
  margin-top: 16px;
}
#information .inner .head .btn, #column .inner .head .btn {
  margin-left: -10px;
}
#information .inner .head .btn a, #column .inner .head .btn a {
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#information .inner .head .btn a:hover, #column .inner .head .btn a:hover {
  opacity: 0.6;
}
#information .inner .head .btn a, #column .inner .head .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: 0.5em;
  color: #fff;
  width: 275px;
  max-width: 100%;
  background: #0099c2;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#information .inner .head .btn a::after, #column .inner .head .btn a::after {
  content: "";
  width: 36px;
  aspect-ratio: 36/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/arow.png);
}
#information .inner .head .btn a, #column .inner .head .btn a {
  height: 57px;
  font-size: 14.66px;
  border-radius: 29px;
}
@media (max-width: 999px) {
  #information .inner .head .btn a, #column .inner .head .btn a {
    -moz-column-gap: 10px;
         column-gap: 10px;
    width: 250px;
    height: 50px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  #information .inner .head .btn a, #column .inner .head .btn a {
    width: 230px;
    height: 45px;
    font-size: 12px;
  }
}
#information .inner .right, #column .inner .right {
  flex: 1;
  padding-right: 10px;
}
#information .inner .right .container, #column .inner .right .container {
  max-width: 460px;
}
#information .inner .right .container .contents:not(.active), #column .inner .right .container .contents:not(.active) {
  display: none;
}
@media (max-width: 999px) {
  #information, #column {
    margin-bottom: -100px;
  }
  #information .inner, #column .inner {
    padding-bottom: 40px;
  }
  #information .inner .head, #column .inner .head {
    padding: 30px 0 0 10px;
  }
  #information .inner .head h2, #column .inner .head h2 {
    margin-bottom: 20px;
  }
  #information .inner .head h2 small, #column .inner .head h2 small {
    margin-top: 10px;
  }
  #information .inner .head .btn, #column .inner .head .btn {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  #information, #column {
    margin-bottom: -50px;
  }
  #information .inner, #column .inner {
    flex-direction: column;
    align-items: center;
    row-gap: 30px;
    padding: 20px 10px;
    border-radius: 20px;
  }
  #information .inner .head, #column .inner .head {
    padding: 0;
  }
  #information .inner .head h2, #column .inner .head h2 {
    margin-bottom: 10px;
  }
  #information .inner .right, #column .inner .right {
    width: 100%;
    padding-right: 0;
  }
  #information .inner .right .info-category, #column .inner .right .info-category {
    margin-bottom: 10px;
  }
  #information .inner .right .info-category ul, #column .inner .right .info-category ul {
    justify-content: center;
  }
  #information .inner .right .info-category ul li, #column .inner .right .info-category ul li {
    border-radius: 10px;
  }
}

/* ----------------------------------------------
point
------------------------------------------------- */
#point {
  margin-bottom: 108px;
}
#point .top {
  background: url(../images/point-bg.jpg) no-repeat center/cover;
  justify-items: end;
  padding: 237px 8% 380px 10px;
}
#point .top .content h2 {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 90px;
  line-height: 1;
  color: #fff;
}
#point .top .content h2 small {
  display: block;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (max-width: 999px) {
  #point .top .content h2 {
    font-size: 70px;
  }
  #point .top .content h2 small {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  #point .top .content h2 {
    font-size: 50px;
  }
  #point .top .content h2 small {
    font-size: 16px;
  }
}
#point .top .content h2 {
  margin-bottom: 29px;
}
#point .top .content h2 small {
  margin: 24px 0 0 3px;
}
#point .top .content .catch {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 29px;
  line-height: 1.4137931034;
  letter-spacing: 0.05em;
  color: #fff;
}
#point .bottom {
  position: relative;
  padding-bottom: 118px;
  margin-top: -325px;
}
#point .bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 58px);
  background: url(../images/point-bg2.jpg) no-repeat center/cover;
  z-index: -1;
}
#point .contents {
  width: min(100% - 20px, 1250px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 67px 2.6%;
  margin: 0 auto;
}
#point .contents .block {
  width: 31.6%;
  position: relative;
  z-index: 1;
  min-height: 325px;
  padding: 0 10px 47px;
  display: flex;
  flex-direction: column;
}
#point .contents .block::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 54px);
  background-color: #fff;
  z-index: -1;
  border-radius: 40px;
  box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.3);
}
#point .contents .block .icon {
  width: 43.2%;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #004c88;
  margin: 0 auto;
  border-radius: 50%;
}
#point .contents .block .icon img {
  max-width: 70%;
  max-height: 70%;
}
#point .contents .block .icon.white {
  background-color: #fff;
  border: 10px solid #004c88;
}
#point .contents .block .num {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 32px;
  line-height: 1.6;
  color: #004c88;
  text-align: center;
  margin-bottom: 8px;
}
#point .contents .block .title {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 30px;
  line-height: 1.3666666667;
  letter-spacing: 0.05em;
  color: #02b8ae;
  text-align: center;
  margin-bottom: 27px;
}
#point .contents .block .text {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6666666667;
  color: #000;
  max-width: 325px;
  margin: 0 10px 35px 10.2666666667%;
}
#point .contents .block .btn {
  margin-top: auto;
}
#point .contents .block .btn a {
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#point .contents .block .btn a:hover {
  opacity: 0.6;
}
#point .contents .block .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: 0.5em;
  color: #fff;
  width: 238px;
  max-width: 100%;
  background: #29a6dd;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#point .contents .block .btn a::after {
  content: "";
  width: 36px;
  aspect-ratio: 36/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/arow.png);
}
#point .contents .block .btn a {
  height: 49px;
  font-size: 12.71px;
  border-radius: 25px;
}
@media (max-width: 999px) {
  #point .contents .block .btn a {
    -moz-column-gap: 10px;
         column-gap: 10px;
    width: 220px;
    height: 45px;
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #point .contents .block .btn a {
    width: 200px;
    height: 40px;
    font-size: 10px;
  }
}
#point .contents .block .btn a {
  margin: 0 auto;
}
@media (max-width: 999px) {
  #point {
    margin-bottom: 80px;
  }
  #point .top {
    padding: 150px 10px 250px;
  }
  #point .top .content h2 {
    margin-bottom: 20px;
  }
  #point .top .content h2 small {
    margin: 10px 0 0 0;
  }
  #point .top .content .catch {
    font-size: 22px;
  }
  #point .bottom {
    margin-top: -200px;
    padding-bottom: 80px;
  }
  #point .contents {
    row-gap: 50px;
  }
  #point .contents .block {
    min-height: 200px;
    padding-bottom: 30px;
  }
  #point .contents .block::before {
    height: calc(100% - 40px);
  }
  #point .contents .block .num {
    font-size: 26px;
  }
  #point .contents .block .title {
    font-size: 22px;
    margin-bottom: 20px;
  }
  #point .contents .block .text {
    font-size: 16px;
    margin: 0 auto 25px;
  }
}
@media (max-width: 767px) {
  #point {
    margin-bottom: 70px;
  }
  #point .top {
    padding: 100px 10px 150px;
  }
  #point .top .content h2 {
    margin-bottom: 10px;
  }
  #point .top .content .catch {
    font-size: 18px;
  }
  #point .bottom {
    margin-top: -100px;
    padding-bottom: 60px;
  }
  #point .contents {
    gap: 40px 6%;
  }
  #point .contents .block {
    width: 47%;
    min-height: 100px;
    padding-bottom: 20px;
  }
  #point .contents .block::before {
    height: calc(100% - 20px);
    border-radius: 20px;
  }
  #point .contents .block .icon.white {
    border-width: 5px;
  }
  #point .contents .block .num {
    font-size: 22px;
  }
  #point .contents .block .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  #point .contents .block .title br {
    display: none;
  }
  #point .contents .block .text {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

/* ----------------------------------------------
products
------------------------------------------------- */
#products .inner {
  width: min(100% - 20px, 1470px);
  margin: 0 auto;
  background: linear-gradient(90deg, #f3feec 0%, #d9f8f5 50.1759%, #c4f3fc 100%);
  padding: 79px 0 150px;
  border-radius: 25px;
}
#products h2 {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 90px;
  line-height: 1;
  color: #02b8ae;
}
#products h2 small {
  display: block;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (max-width: 999px) {
  #products h2 {
    font-size: 70px;
  }
  #products h2 small {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  #products h2 {
    font-size: 50px;
  }
  #products h2 small {
    font-size: 16px;
  }
}
#products h2 {
  text-align: center;
  margin-bottom: 70px;
}
#products h2 small {
  margin-top: 26px;
}
#products .container {
  width: min(100% - 120px, 1295px);
  margin: 0 auto;
  justify-items: center;
}
#products .container .heading:not(:first-child) {
  margin-top: 96px;
}
#products .container .contents {
  width: 100%;
  z-index: 1;
  margin-bottom: 43px;
}
#products .container .contents .slick-list {
  margin: 0 -16px;
}
#products .container .contents .slick-arow {
  position: absolute;
  top: 50%;
  width: 105px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #02b8ae;
  background-repeat: no-repeat;
  z-index: -1;
  cursor: pointer;
}
#products .container .contents .slick-arow.prev {
  left: 0;
  transform: translate(-50%, -50%);
  background-image: url(../images/arow2.png);
  background-position: center left 24px;
}
#products .container .contents .slick-arow.next {
  right: 0;
  transform: translate(50%, -50%);
  background-image: url(../images/arow3.png);
  background-position: center right 24px;
}
#products .container .contents .block {
  margin: 0 16px 10px;
}
#products .container .btn a {
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#products .container .btn a:hover {
  opacity: 0.6;
}
#products .container .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: 0.5em;
  color: #fff;
  width: 238px;
  max-width: 100%;
  background: #29a6dd;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#products .container .btn a::after {
  content: "";
  width: 36px;
  aspect-ratio: 36/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/arow.png);
}
#products .container .btn a {
  height: 49px;
  font-size: 12.71px;
  border-radius: 25px;
}
@media (max-width: 999px) {
  #products .container .btn a {
    -moz-column-gap: 10px;
         column-gap: 10px;
    width: 220px;
    height: 45px;
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #products .container .btn a {
    width: 200px;
    height: 40px;
    font-size: 10px;
  }
}
#products .container {
  /* &:not(:last-child){
    margin-bottom: 96px;
  } */
}
@media (max-width: 999px) {
  #products .inner {
    padding: 60px 0 100px;
  }
  #products h2 {
    margin-bottom: 60px;
  }
  #products h2 small {
    margin-top: 10px;
  }
  #products .container {
    width: min(100% - 100px);
  }
  #products .container .heading:not(:first-child) {
    margin-top: 70px;
  }
  #products .container .contents {
    margin-bottom: 30px;
  }
  #products .container .contents .slick-list {
    margin: 0 -5px;
  }
  #products .container .contents .slick-arow {
    width: 80px;
  }
  #products .container .contents .slick-arow.prev {
    background-position: center left 5px;
  }
  #products .container .contents .slick-arow.next {
    background-position: center right 5px;
  }
  #products .container .contents .block {
    margin: 0 5px 10px;
  }
}
@media (max-width: 767px) {
  #products .inner {
    padding: 40px 0 70px;
    border-radius: 15px;
  }
  #products h2 {
    margin-bottom: 40px;
  }
  #products .container {
    width: min(100% - 60px);
  }
  #products .container .heading:not(:first-child) {
    margin-top: 60px;
  }
  #products .container .contents {
    margin-bottom: 20px;
  }
  #products .container .contents .slick-arow {
    width: 50px;
    background-size: 10px auto;
  }
}

/* ----------------------------------------------
company
------------------------------------------------- */
#company {
  background: url(../images/company-bg.jpg) no-repeat center/cover;
  justify-items: end;
  margin-bottom: 77px;
}
#company .contents {
  background-color: rgba(0, 0, 57, 0.35);
  width: min(90%, 828px);
  padding: 35px 10px 36px 2.6875%;
}
#company .contents a {
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#company .contents a:hover {
  opacity: 0.6;
}
#company .contents .head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 6.9190600522%;
  padding-left: 9px;
  margin-bottom: 37px;
}
#company .contents .head h2 {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 90px;
  line-height: 1;
  color: #fff;
}
#company .contents .head h2 small {
  display: block;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (max-width: 999px) {
  #company .contents .head h2 {
    font-size: 70px;
  }
  #company .contents .head h2 small {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  #company .contents .head h2 {
    font-size: 50px;
  }
  #company .contents .head h2 small {
    font-size: 16px;
  }
}
#company .contents .head h2 {
  line-height: 0.8224444444;
  display: flex;
  align-items: end;
}
#company .contents .head h2 small {
  letter-spacing: 0.15em;
  margin: 0 0 20px -25px;
}
#company .contents .head .logo {
  width: max(min(18.9295039164%, 145px), 60px);
}
#company .contents .links {
  margin-bottom: 25px;
}
#company .contents .links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
}
#company .contents .links ul li {
  max-width: 30.7096774194%;
}
#company .contents .links ul li a {
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#company .contents .links ul li a:hover {
  opacity: 0.6;
}
#company .contents .links ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: 0.5em;
  color: #0071b7;
  width: 238px;
  max-width: 100%;
  background: linear-gradient(90deg, #f3feec 0%, #d9f8f5 50.1759%, #c4f3fc 100%);
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#company .contents .links ul li a::after {
  content: "";
  width: 36px;
  aspect-ratio: 36/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/arow4.png);
}
#company .contents .links ul li a {
  height: 49px;
  font-size: 12.71px;
  border-radius: 25px;
}
@media (max-width: 999px) {
  #company .contents .links ul li a {
    -moz-column-gap: 10px;
         column-gap: 10px;
    width: 220px;
    height: 45px;
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  #company .contents .links ul li a {
    width: 200px;
    height: 40px;
    font-size: 10px;
  }
}
#company .contents .data {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  padding-left: 21px;
  margin-bottom: 14px;
}
#company .contents .tel {
  padding-left: 23px;
  margin-bottom: 22px;
}
#company .contents .tel a {
  display: flex;
  align-items: center;
  -moz-column-gap: 22px;
       column-gap: 22px;
  font-family: "helvetica-lt-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 67.91px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #fff;
}
#company .contents .bnrs {
  max-width: 738px;
}
#company .contents .bnrs .bnr {
  position: relative;
  z-index: 1;
}
#company .contents .bnrs .bnr:not(:has(a)),
#company .contents .bnrs .bnr a {
  display: block;
  padding: 10px 28px 24px;
}
#company .contents .bnrs .bnr .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#company .contents .bnrs .bnr .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
#company .contents .bnrs .bnr .title {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 44.96px;
  line-height: 1.6;
}
#company .contents .bnrs .bnr .title small {
  display: block;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-top: -10px;
}
#company .contents .bnrs .bnr.professional .title {
  color: #29a6dd;
}
#company .contents .bnrs .bnr.professional .title small {
  color: #0099c2;
}
#company .contents .bnrs .bnr.home .title {
  color: #87c13f;
}
#company .contents .bnrs .bnr.home .title small {
  color: #39b04a;
}
#company .contents .bnrs .bnr:not(:last-child) {
  margin-bottom: 20px;
}
@media (max-width: 999px) {
  #company {
    margin-bottom: 60px;
  }
  #company .contents {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #company .contents .head {
    padding-left: 0;
    margin-bottom: 25px;
  }
  #company .contents .head h2 small {
    margin-bottom: 15px;
  }
  #company .contents .links {
    margin-bottom: 15px;
  }
  #company .contents .data {
    padding-left: 0;
    font-size: 14px;
  }
  #company .contents .tel {
    padding-left: 0;
    margin-bottom: 15px;
  }
  #company .contents .tel a {
    font-size: 50px;
  }
  #company .contents .bnrs .bnr:not(:has(a)),
  #company .contents .bnrs .bnr a {
    padding: 10px 15px 15px;
  }
  #company .contents .bnrs .bnr .title {
    font-size: 36px;
    line-height: 1.2;
  }
  #company .contents .bnrs .bnr .title small {
    font-size: 20px;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  #company {
    margin-bottom: 50px;
  }
  #company .contents {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #company .contents .head {
    margin-bottom: 15px;
  }
  #company .contents .head h2 {
    flex-direction: column;
    align-items: start;
    row-gap: 10px;
  }
  #company .contents .head h2 small {
    margin: 0;
  }
  #company .contents .links {
    margin-bottom: 10px;
  }
  #company .contents .links ul li {
    max-width: 47%;
  }
  #company .contents .links ul li a::after {
    display: none;
  }
  #company .contents .data {
    font-size: 12px;
  }
  #company .contents .tel {
    margin-bottom: 10px;
  }
  #company .contents .tel a {
    font-size: 40px;
  }
  #company .contents .bnrs .bnr:not(:has(a)),
  #company .contents .bnrs .bnr a {
    padding: 10px;
  }
  #company .contents .bnrs .bnr .title {
    font-size: 28px;
  }
  #company .contents .bnrs .bnr .title small {
    font-size: 18px;
  }
  #company .contents .bnrs .bnr:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media (max-width: 500px) {
  #company .contents .tel a {
    font-size: 26px;
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
  #company .contents .tel a img {
    max-width: 40px;
  }
}

/* ----------------------------------------------
sustainability
------------------------------------------------- */
#sustainability {
  margin-bottom: 81px;
}
#sustainability .contents {
  width: min(100% - 20px, 1300px);
  margin: 0 auto;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}
#sustainability .contents:not(:has(a)),
#sustainability .contents a {
  padding: 30px 10px 10px;
  align-content: center;
  min-height: 416px;
}
#sustainability .contents a {
  display: block;
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#sustainability .contents a:hover {
  opacity: 0.6;
}
#sustainability .contents .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#sustainability .contents .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#sustainability .contents .bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #008d45;
  mix-blend-mode: overlay;
}
#sustainability .contents h2 {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 90px;
  line-height: 1;
  color: #fff;
}
#sustainability .contents h2 small {
  display: block;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 31.39px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (max-width: 999px) {
  #sustainability .contents h2 {
    font-size: 70px;
  }
  #sustainability .contents h2 small {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  #sustainability .contents h2 {
    font-size: 50px;
  }
  #sustainability .contents h2 small {
    font-size: 20px;
  }
}
#sustainability .contents h2 {
  text-align: center;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 0, 0, 0.75);
}
#sustainability .contents h2 small {
  letter-spacing: 0.2em;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.99), 0 0 2px rgba(0, 0, 0, 0.99), 0 0 2px rgba(0, 0, 0, 0.99);
  margin-top: 10px;
}
@media (max-width: 999px) {
  #sustainability {
    margin-bottom: 70px;
  }
  #sustainability .contents:not(:has(a)),
  #sustainability .contents a {
    padding: 10px;
    min-height: 350px;
  }
}
@media (max-width: 767px) {
  #sustainability {
    margin-bottom: 60px;
  }
  #sustainability .contents:not(:has(a)),
  #sustainability .contents a {
    min-height: 200px;
  }
}
@media (max-width: 500px) {
  #sustainability .contents h2 {
    font-size: 30px;
  }
  #sustainability .contents h2 small {
    font-size: 16px;
  }
}

/* ----------------------------------------------
recruit
------------------------------------------------- */
#recruit {
  background: url(../images/recruit-bg.jpg) no-repeat center/cover;
  padding-top: 139px;
  margin-bottom: 47px;
}
#recruit h2 {
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  font-size: 90px;
  line-height: 1;
  color: #0099c2;
}
#recruit h2 small {
  display: block;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 31.39px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (max-width: 999px) {
  #recruit h2 {
    font-size: 70px;
  }
  #recruit h2 small {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  #recruit h2 {
    font-size: 50px;
  }
  #recruit h2 small {
    font-size: 20px;
  }
}
#recruit h2 {
  padding-left: 10.5625%;
  margin-bottom: 70px;
}
#recruit h2 small {
  letter-spacing: 0.2em;
  margin-top: 7px;
}
#recruit .bottom {
  position: relative;
  padding: 52px 10px 25px 10%;
}
#recruit .bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f3feec 0%, #d9f8f5 50.1759%, #c4f3fc 100%);
  mix-blend-mode: multiply;
}
#recruit .bottom .catch {
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 50px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 0, 0, 0.75);
  position: relative;
  margin-bottom: 50px;
}
#recruit .bottom .btn a {
  text-decoration: none;
  transition: all 0.5s ease-out;
}
#recruit .bottom .btn a:hover {
  opacity: 0.6;
}
#recruit .bottom .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: 0.5em;
  color: #fff;
  width: 420px;
  max-width: 100%;
  background: #29a6dd;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#recruit .bottom .btn a::after {
  content: "";
  width: 36px;
  aspect-ratio: 36/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/arow.png);
}
#recruit .bottom .btn a {
  height: 100px;
  font-size: 28px;
  border-radius: 50px;
}
@media (max-width: 999px) {
  #recruit .bottom .btn a {
    -moz-column-gap: 10px;
         column-gap: 10px;
    width: 380px;
    height: 80px;
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  #recruit .bottom .btn a {
    width: 280px;
    height: 60px;
    font-size: 18px;
  }
}
@media (max-width: 999px) {
  #recruit {
    padding-top: 100px;
    margin-bottom: 35px;
  }
  #recruit h2 {
    margin-bottom: 50px;
    padding-left: 10px;
  }
  #recruit .bottom {
    padding: 40px 10px 25px;
  }
  #recruit .bottom .catch {
    font-size: 40px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  #recruit {
    padding-top: 70px;
    margin-bottom: 30px;
  }
  #recruit h2 {
    margin-bottom: 40px;
  }
  #recruit .bottom {
    padding: 30px 10px 25px;
  }
  #recruit .bottom .catch {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
@media (max-width: 500px) {
  #recruit .bottom .catch {
    font-size: 20px;
  }
}/*# sourceMappingURL=index.css.map */